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

• [1、使用v - model指令（推荐方式）](#1、使用v - model指令（推荐方式）)
• [2、手动实现双向绑定（不使用v - model语法糖）](#2、手动实现双向绑定（不使用v - model语法糖）)
• [3、 .sync修饰符](#3、 .sync修饰符)
• [4、.sync 与 v - model 的比较](#4、.sync 与 v - model 的比较)

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

• 在 Vue 中，v - model是一个语法糖，它在组件上的使用实际上是自动扩展为特定的属性和事件。

• 例如，创建一个自定义组件MyInput，它类似于原生的input标签可以实现数据双向绑定。

• 首先，在组件内部，要通过model选项来定义v - model绑定的属性和对应的事件。

• 以下是MyInput组件的示例代码：

• 然后在父组件中使用MyInput组件并进行双向绑定：

• 在这里，MyInput组件内部通过props接收value属性，这个属性是由父组件通过v - model传递过来的。当input元素的input事件触发时，组件内部通过$emit触发input事件，并将新的值传递给父组件。父组件中的v - model会自动更新绑定的message数据。

2、手动实现双向绑定（不使用v - model语法糖）

• 还是以一个类似输入框的组件为例。在父组件中，将数据传递给子组件作为属性，同时给子组件传递一个更新数据的方法。

• 子组件代码如下：

• 父组件代码：

• 在这个例子中，父组件将parentValue作为inputValue属性传递给子组件。子组件在input事件触发时，通过$emit触发updateValue事件，并将新的值传递给父组件。父组件监听updateValue事件，调用updateParentValue方法来更新parentValue数据。

3、 .sync修饰符

1. 基本概念

• 在 Vue 中，.sync是一个语法糖，主要用于在父子组件之间实现双向数据绑定。它提供了一种简洁的方式来让子组件能够修改父组件中的数据。

• 例如，我们有一个父组件ParentComponent和一个子组件ChildComponent，父组件中有一个数据属性count，当我们想要子组件能够修改这个count属性时，可以使用.sync修饰符。

• 父组件代码如下：

• 子组件代码如下：

2. 工作原理

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

4、.sync 与 v - model 的比较

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