vue 父子组件双向绑定

### Vue.js 父子组件双向绑定实现方法

在 Vue.js 中，父子组件间的双向数据绑定是一个常见需求。通过 `props` 向下传递数据给子组件，并利用 `$emit` 将事件触发回传至父组件，可以轻松达成这一目标。

#### 方法一：使用 Props 和 $emit 实现双向绑定

父组件向子组件传递属性的同时监听来自子组件的自定义事件，在接收到更新通知时同步修改自身的状态：

<template>
  <div>
    <!-- 子组件接收 title 和 content 属性 -->
    <child-component :title="title" :content="content" @content-changed="updateContent"></child-component>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      title: '父组件标题',
      content: '父组件内容'
    };
  },
  methods: {
    // 当子组件发出 content-changed 事件时调用此函数并更新本地 state
    updateContent(newContent) {
      this.content = newContent;
    }
  }
};
</script>

当子组件内部发生改变需要反馈到父级的时候，则应该发射一个名为 `content-changed` 的事件携带新的值作为参数[^1]。

#### 方法二：借助 v-model 自定义修饰符简化操作

对于简单的输入框或其他表单控件来说，还可以更进一步地封装成支持 `.sync` 或者直接配合 `v-model` 来完成更加简洁优雅的数据流管理方式。这种方式不仅减少了样板代码量而且提高了可读性和维护性。

<!-- Parent Component -->
<template>
  <custom-input v-model="message"></custom-input>
</template>

<script>
// ...省略其他部分...
data () {
  return {
    message: ''
  }
}
</script>

<!-- CustomInput Component -->
<template>
  <input type="text" :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  props: ['value']
}
</script>

这种方法允许开发者像处理原生 HTML 表单元素一样对待自定义组件，从而获得更好的开发体验[^2]。