vue中v-model的原理是什么？v-model作用在组件上的原理是什么？sync修饰符的原理是什么？

vue中v-model的原理是什么？

特点：双向绑定

数据=>视图

视图=>数据

场景：

1. 收集表单数据
2. 组件上

原理：

v-model只是个语法题，本质是：v-model = v-bind (:value) + v-on (@input)

<template><div id="app"><p>{{ text }}</p><input type="text" v-model="text"><input type="text" :value="text" @input="(e) => (text = e.target.value)" /></div>
</template><script>
export default {name: "app",data() {return {text: "xxxxxxxx",};},
};
</script><style>
</style>

vue中v-model作用在组件上的原理是什么？

为什么要在组件上使用v-model，我们的目的是？

1. v-model绑定的变量发生改变，能够影响组件的状态或行为，数据=>视图
2. 组件内部状态或行为发生变化，能够影响v-model绑定的变量，视图=>数据

怎么做？

v-model其实就是 :value和@input事件的简写

• 父组件：v-model直接绑定数据

• 子组件：props通过value接收数据，事件触发 input

例子

App.vue

<template><div id="app"><my-select v-model="city"></my-select></div>
</template><script>import MySelect from "./components/MySelect.vue";export default {name: "app",components: {MySelect,},data() {return {city: 104,};},
};
</script><style>
</style>

MySelect.vue

<template><div><select :value="value" @change="selectCity"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props: {value: String,},methods: {selectCity(e) {this.$emit("input", e.target.value);},},
};
</script><style>
</style>

vue中sync修饰符的原理是什么？

.sync 是一个修饰符，用于在自定义组件中实现父子组件之间的双向数据绑定。

.sync主要应用于自定义组件之间的数据传递和状态管理，可以实现父子组件之间的双向数据流。通过 .sync，可以将父组件的数据传递给子组件，并且子组件可以修改这个数据并将修改的结果传递回父组件。

1 子组件改变父组件中的变量值

1.1 不使用sync

我们知道，vue中父组件是使用v-bind(缩写为:)给子组件传入参数，然后子组件通过prop属性接收该参数。此时我们可以给子组件传入一个函数，子组件通过调用传入的函数来改变父组件中参数的值。

即主要部分如下所示

<!-- 父组件给子组件传入一个setNum函数 -->
<child :num="numParent" @setNum="(res)=> numParent = res"></child>//子组件通过调用这个函数来实现修改父组件的状态
methods: {changNum(){this.$emit('setNum',666)
}

此时子组件只需要触发changNum函数就能执行父组件中的setNum函数从而改变父组件中numParent的值

1.2 使用sync

上述方法较复杂，使用sync可简化写法

<!-- 父组件给子组件传入一个setNum函数 -->
<child :num.sync="numParent">//子组件通过调用这个函数来实现修改父组件的状态
methods: {changNum(){this.$emit('update:num',666)
}

上述两种方式都可以将numParent的值由222变为666，其中父组件中绑定的参数后面加了一个.sync，子组件中的事件名称被换成了update:age，如下：

• update：固定部分，vue约定俗成的，注意必须添加update：的前缀才能正确触发事件
• num是要修改的参数的名称，是我们手动配置的，与传入的参数名字对应起来

2 实现父子组件双向绑定

vue考虑到组件的可维护性，是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信（通过1.1方式），通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。

那么同时，vue中也提供了一种解决方案.sync修饰符（1.2方式）

允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信（通过1.1方式），通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。

那么同时，vue中也提供了一种解决方案.sync修饰符（1.2方式）