在Vue.js中，子组件与父组件之间的数据传递通常是单向的，即父组件向子组件传递数据（通过props），而子组件向父组件发送消息（通过事件）。然而，如果你想要实现一种“双向绑定”的效果，你可以使用.sync修饰符（在Vue 2.x中）或者v-model结合自定义组件（在Vue 2.x和Vue 3.x中）。
Vue 2.x 使用 .sync 修饰符
在Vue 2.x中，.sync修饰符提供了一种简化的方式来实现子组件与父组件之间的双向绑定。
父组件：
<template> | |
<child-component :foo.sync="bar"></child-component> | |
</template> | |
<script> | |
export default { | |
data() { | |
return { | |
bar: 'Hello from parent' | |
} | |
} | |
} | |
</script> |
子组件：
<template> | |
<div>{{ foo }}</div> | |
<button @click="updateFoo">Update Foo</button> | |
</template> | |
<script> | |
export default { | |
props: ['foo'], | |
methods: { | |
updateFoo() { | |
this.$emit('update:foo', 'Hello from child'); | |
} | |
} | |
} | |
</script> |
在上面的例子中，当子组件的updateFoo方法被调用时，它会发出一个update:foo事件，并携带一个新的值。由于父组件使用了.sync修饰符，这个值会被用来更新bar数据属性。
Vue 2.x 和 Vue 3.x 使用 v-model
在Vue中，v-model通常用于表单输入元素，但它也可以用于自定义组件来实现双向绑定。
父组件：
<template> | |
<custom-input v-model="message"></custom-input> | |
</template> | |
<script> | |
import CustomInput from './CustomInput.vue' | |
export default { | |
components: { | |
CustomInput | |
}, | |
data() { | |
return { | |
message: 'Hello from parent' | |
} | |
} | |
} | |
</script> |
子组件（CustomInput.vue）：
<template> | |
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"> | |
</template> | |
<script> | |
export default { | |
props: ['modelValue'], | |
// 在Vue 3中，你可能需要使用'modelValue'作为prop名，并发出'update:modelValue'事件 | |
// 但在Vue 2中，你可以使用'value'和'input'作为默认的prop名和事件名 | |
} | |
</script> |
注意：在Vue 3中，使用v-model与自定义组件时，你需要明确指定prop和事件的名称。Vue 3推荐使用modelValue作为prop名，并发出update:modelValue事件。但在Vue 2中，value和input是默认的prop名和事件名。
总结
在Vue中，虽然子组件与父组件之间的数据传递通常是单向的，但你可以通过使用.sync修饰符（在Vue 2.x中）或者结合v-model和自定义事件（在Vue 2.x和Vue 3.x中）来实现双向绑定的效果。
