数据绑定

每个标签都有属性，通过vue的指令，我们可以实现动态绑定，通常用于绑定表单的属性，组件传值

Vue中有2种数据绑定的方式

• 单项绑定 v-bind
• 双向绑定 v-model

1.v-bind

v-bind可用于动态绑定表单空间的value

当通过js修改绑定的值的时候，会自动同步表单控件中的值

<template>
	<input v-bind:value="val" />
</template>

<script>
export default {
    data(){
		return{
            val:11
        }
    },
}
</script>

v-bind可以有以下简写方式，即省略v-bind，只写一个冒号:

<input :value="val" />

TIP

v-bind 的绑定是单项的，通过js修改data中的值会同步到表单控件中

但在表单控件中修改值，并不会修改data中的数据

2.v-model

v-model可用于表单控件中的双向绑定，也可用于自定义组件中的双向绑定，两者原理不同

<template>
	<input v-model="val" />
</template>

<script>
export default {
    data(){
		return{
            val:11
        }
    },
}
</script>

当表单控件通过v-model绑定data中数据时，data中数据修改会同步到表单控件中，表单空间修改也会同步data里的数据

2.1 表单控件双向绑定原理

其原理就是结合表单控件的value属性，和input事件

<template>
	<input :value="val" @input="val=$event.target.value"/>
</template>

<script>
export default {
    data(){
		return{
            val:11
        }
    },
}
</script>

2.2 组件双向绑定原理

在组件中，v-model父传子是prop实现，子传父是通过$emit('input')实现的

当组件中使用v-model时，会自动绑定一个@input事件

<Child v-model="value"/>

相当于

<Child :value="value" @input="(v)=> value = v"/>

那么我们在子组件中就可以使用$emit('input',value)把数据传递给父组件

父组件通过v-model向子组件传递数据时，子组件props中应该接收的属性名为value

如下所示

Father.vue

<template>
	<Stars v-model="value"></Stars>
</template>
<script>
    export default {
        components: {
            Stars: () => import('./views/Stars.vue'),
        },
        data() {
            return {
                value: 0,
            }
        },
    }
</script>

Child.vue

<template>
	<div>
		{{ value }}
		<button @click="$emit('input', value + 1)">add</button>
	</div>
</template>

<script>
export default {
	props: {
		value: Number,
	},
}
</script>