vue自定义组件双向数据绑定

1、使用v - model指令（推荐方式）

在 Vue 中，v - model是一个语法糖，它在组件上的使用实际上是自动扩展为特定的属性和事件。
例如，创建一个自定义组件MyInput，它类似于原生的input标签可以实现数据双向绑定。
首先，在组件内部，要通过model选项来定义v - model绑定的属性和对应的事件。
以下是MyInput组件的示例代码：
<template> </template> <script> export default { name: 'MyInput', props: { value: String }, methods: { updateValue(event) { this.$emit('input', event.target.value); } }, model: { prop: 'value', event: 'input' } }; </script>
然后在父组件中使用MyInput组件并进行双向绑定：
<template>
<my - input v - model="message"></my - input>
Message: {{message}}

</template> <script> import MyInput from './MyInput.vue'; export default { components: { MyInput }, data() { return { message: 'Hello' }; } }; </script>
在这里，MyInput组件内部通过props接收value属性，这个属性是由父组件通过v - model传递过来的。当input元素的input事件触发时，组件内部通过$emit触发input事件，并将新的值传递给父组件。父组件中的v - model会自动更新绑定的message数据。

还是以一个类似输入框的组件为例。在父组件中，将数据传递给子组件作为属性，同时给子组件传递一个更新数据的方法。
子组件代码如下：
<template> </template> <script> export default { name: 'CustomInput', props: { inputValue: String }, methods: { handleInput(event) { this.$emit('updateValue', event.target.value); } } }; </script>
父组件代码：
<template>
<custom - input :inputValue="parentValue" @updateValue="updateParentValue"></custom - input>
Parent value: {{parentValue}}

</template> <script> import CustomInput from './CustomInput.vue'; export default { components: { CustomInput }, data() { return { parentValue: 'Initial value' }; }, methods: { updateParentValue(newValue) { this.parentValue = newValue; } } }; </script>
在这个例子中，父组件将parentValue作为inputValue属性传递给子组件。子组件在input事件触发时，通过$emit触发updateValue事件，并将新的值传递给父组件。父组件监听updateValue事件，调用updateParentValue方法来更新parentValue数据。

在 Vue 中，.sync是一个语法糖，主要用于在父子组件之间实现双向数据绑定。它提供了一种简洁的方式来让子组件能够修改父组件中的数据。
例如，我们有一个父组件ParentComponent和一个子组件ChildComponent，父组件中有一个数据属性count，当我们想要子组件能够修改这个count属性时，可以使用.sync修饰符。
父组件代码如下：
<template>

Count in Parent: {{count}}
<child - component :count.sync="count"></child - component>
</template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { count: 0 }; } }; </script>
子组件代码如下：
<template>
<button @click="incrementCount">Increment Count in Child</button>
</template> <script> export default { props: { count: Number }, methods: { incrementCount() { this.$emit('update:count', this.count + 1); } } }; </script>

当使用.sync修饰符时，实际上是一个语法简写。对于<child - component :count.sync="count"></child - component>这样的代码，它等价于<child - component :count="count" @update:count="count = $event"></child - component>。
在子组件内部，当需要修改父组件传递过来的count属性时，通过$emit发送一个update:count事件，并且将新的值作为参数传递出去。父组件接收到这个事件后，就会将count属性更新为新的值，从而实现了双向数据绑定。

相似点：
- 它们都可以实现父子组件之间的数据双向绑定。都是一种语法糖，帮助开发者更简洁地实现数据交互。
不同点：
- v - model主要用于表单元素或者类似表单元素的自定义组件，并且在组件内部默认绑定的属性是value，对应的事件是input（当然可以通过model选项进行修改）。而.sync可以用于更广泛的数据双向绑定场景，只要遵循update:propName这样的事件命名规则就可以。
- v - model在一个组件上通常只用于一个属性的双向绑定，而.sync可以用于多个属性的双向绑定，例如<component :prop1.sync="data1":prop2.sync="data2">。