Vue2 父子组件通信：使用 v-model 实现双向绑定

在 Vue2 中，可以使用 v-model 在父子组件之间进行双向绑定和通信。下面是一个示例：\n\n父组件：\njavascript\n<template>\n <div>\n <ChildComponent v-model="message" />\n <p>Message from child: {{ message }}</p>\n </div>\n</template>\n\n<script>\nimport ChildComponent from './ChildComponent.vue';\n\nexport default {\n data() {\n return {\n message: '',\n };\n },\n components: {\n ChildComponent,\n },\n};\n</script>\n\n\n子组件（ChildComponent.vue）：\njavascript\n<template>\n <div>\n <input type="text" v-model="value" />\n </div>\n</template>\n\n<script>\n export default {\n props: ['value'],\n computed: {\n // 通过计算属性将父组件传递的value值绑定到子组件的内部变量中\n localValue: {\n get() {\n return this.value;\n },\n set(newValue) {\n this.$emit('input', newValue); // 触发父组件的input事件，更新父组件的value值\n },\n },\n },\n};\n</script>\n\n\n在父组件中，我们使用 v-model 指令来绑定一个名为 message 的数据属性，并将其传递给子组件。在子组件中，我们使用 props 接收父组件传递的 value 值，并通过计算属性 localValue 实现父子组件之间的双向绑定。当子组件的输入框的值发生变化时，会触发 input 事件，通过 $emit 方法将新的值传递给父组件，从而更新父组件的 message 值。\n\n这样，当在子组件中输入值时，父组件的 message 值也会随之更新，同时父组件中的 message 值变化也会反映在子组件中。