vue 父子组件实现model双向绑定

• 在Vue.js中，通过在子组件中使用 v-model 来实现双向绑定，需要在子组件内部使用 model 选项。这允许你将子组件中的一个 prop 和事件关联到父组件的一个属性上。
• 以下是在子组件中使用 v-model 的示例：

<!-- ChildComponent.vue -->
<template>
  <div>
    <el-input v-model="internalValue" placeholder="请输入"></el-input>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: String
  },
  data() {
    return {
      internalValue: this.value
    };
  },
  watch: {
    // 监听本地数据变化，更新父组件传递的 value
    internalValue(newValue) {
      this.$emit('input', newValue);
    },
    // 监听父组件传递的 value 变化，更新本地数据
    value(newValue) {
      this.internalValue = newValue;
    }
  }
};
</script>

• 在这个例子中，通过使用 model 选项，我们将 el-input 的值绑定到了子组件内的 internalValue 数据属性。同时，通过 watch 监听 internalValue 的变化，并在变化时通过 $emit(‘input’, newValue) 来触发 input 事件，从而更新父组件传递的 value。
• 在父组件中，可以通过使用 v-model 来进行双向绑定：

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <!-- 使用 v-model 进行双向绑定 -->
    <ChildComponent v-model="parentValue" />
    <p>父组件的值: {{ parentValue }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '初始值'
    };
  }
};
</script>

• 这样，父组件中的 v-model=“parentValue” 将实现与子组件的双向绑定，子组件内部的值变化会反映到父组件中。