vue父子组件数据双向绑定

在 Vue 中，父子组件之间可以通过 props 和 events 实现数据的双向绑定。具体的步骤如下：

1. 在父组件中定义一个数据，并将其作为 props 传递给子组件：

<template>
  <div>
    <child-component :message="message" @update-message="updateMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    updateMessage(value) {
      this.message = value;
    }
  }
};
</script>

2. 在子组件中使用 props 接收父组件传递的数据，并使用 $emit 方法触发一个自定义的事件来通知父组件更新数据：

<template>
  <div>
    <input type="text" v-model="childMessage" @input="updateParentMessage">
  </div>
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {
      childMessage: this.message
    };
  },
  methods: {
    updateParentMessage() {
      this.$emit('update-message', this.childMessage);
    }
  },
  watch: {
    message(newValue) {
      this.childMessage = newValue;
    }
  }
};
</script>

在上述示例中，父组件通过 :message="message" 将自己的 message 数据以 props 的方式传递给子组件。子组件接收到这个父组件的 message 数据后，使用 v-model 绑定到一个本地的 childMessage 变量上。当子组件中的输入框内容发生变化时，通过 @input 事件触发 updateParentMessage 方法，该方法使用 $emit 触发自定义事件 'update-message' 并将子组件的 childMessage 数据作为参数传递给父组件。父组件接收到这个事件后，触发 updateMessage 方法来更新自己的 message 数据。