props实现 v-model slot双向绑定

在Vue.js中，`v-model` 是用于数据绑定的指令，它将用户界面元素（如输入框、复选框等）与组件实例的数据属性关联起来，实现了数据的双向同步。而 `props` 是父组件向子组件传递数据的一种机制。

当需要在子组件中响应父组件的状态改变并更新视图时，可以结合使用 `v-model` 和 `props`。假设有一个父组件 `ParentComponent` 拥有一个名为 `value` 的 prop，然后在子组件 `ChildComponent` 中接受这个值，并希望用户输入的内容能实时反映到父组件：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :value="parentValue" />
    <p>Input value: {{ parentValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { parentValue: 'Initial Value' };
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <input type="text" v-model="localValue" @input="$emit('update:value', localValue)">
</template>

<script>
export default {
  props: ['value'], // 接收父组件的值
  data() {
    return { localValue: '' }; // 子组件有自己的局部状态
  },
  watch: {
    value(newVal) { // 当父值变化时，更新本地值
      this.localValue = newVal;
    }
  },
  methods: {
    updateParentValue() {
      this.$emit('update:value', this.localValue); // 当本地值改变时，通知父组件更新
    }
  }
};
</script>

在这个例子中，`v-model` 在子组件中的输入框上工作，当用户输入时会更新 `localValue`。每当 `localValue` 改变时，通过 `@input` 事件触发 `updateParentValue` 方法，通过 `$emit('update:value')` 向父组件发送一个自定义事件，告诉父组件更新 `parentValue`，从而实现双向绑定。