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

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

• 在 Vue 中，v - model是一个语法糖，它在组件上的使用实际上是自动扩展为特定的属性和事件。
• 例如，创建一个自定义组件MyInput，它类似于原生的input标签可以实现数据双向绑定。
• 首先，在组件内部，要通过model选项来定义v - model绑定的属性和对应的事件。
• 以下是MyInput组件的示例代码：

<template>
  <input :value="value" @input="updateValue">
</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>
  <div>
    <my - input v - model="message"></my - input>
    <p>Message: {{message}}</p>
  </div>
</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数据。

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

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

<template>
  <input :value="inputValue" @input="handleInput">
</template>
<script>
export default {
  name: 'CustomInput',
  props: {
    inputValue: String
  },
  methods: {
    handleInput(event) {
      this.$emit('updateValue', event.target.value);
    }
  }
};
</script>

• 父组件代码：

<template>
  <div>
    <custom - input :inputValue="parentValue" @updateValue="updateParentValue"></custom - input>
    <p>Parent value: {{parentValue}}</p>
  </div>
</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数据。

3、 .sync修饰符

1. 基本概念

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

<template>
  <div>
    <p>Count in Parent: {{count}}</p>
    <child - component :count.sync="count"></child - component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      count: 0
    };
  }
};
</script>

• 子组件代码如下：

<template>
  <div>
    <button @click="incrementCount">Increment Count in Child</button>
  </div>
</template>
<script>
export default {
  props: {
    count: Number
  },
  methods: {
    incrementCount() {
      this.$emit('update:count', this.count + 1);
    }
  }
};
</script>

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”>。