面试题：Vue 父子组件双向绑定的方法有哪些？

在 Vue 中，父子组件之间的双向绑定是一个常见的需求。以下是实现父子组件双向绑定的几种方法：

1. 使用 `v-model`

v-model 是 Vue 提供的一种语法糖，用于实现父子组件的双向绑定。它实际上是 :value 和 @input 的组合。

父组件

<template>
  <ChildComponent v-model="message" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
};
</script>

子组件

<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

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

说明：
- 父组件通过 v-model 绑定数据。
- 子组件通过 props 接收 value，并通过 $emit('input') 更新父组件的数据。

2. 使用 `.sync` 修饰符

.sync 修饰符是另一种实现双向绑定的方式，它实际上是 :prop 和 @update:prop 的组合。

父组件

<template>
  <ChildComponent :message.sync="message" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
};
</script>

子组件

<template>
  <input :value="message" @input="$emit('update:message', $event.target.value)" />
</template>

<script>
export default {
  props: ['message'],
};
</script>

说明：
- 父组件通过 :prop.sync 绑定数据。
- 子组件通过 props 接收数据，并通过 $emit('update:prop') 更新父组件的数据。

3. 使用 `v-model` 和自定义事件

如果需要更灵活的双向绑定，可以在子组件中自定义 v-model 的行为。

父组件

<template>
  <ChildComponent v-model="message" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
};
</script>

子组件

<template>
  <input :value="value" @input="updateValue" />
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateValue(event) {
      this.$emit('input', event.target.value);
    },
  },
};
</script>

说明：
- 父组件通过 v-model 绑定数据。
- 子组件通过 props 接收 value，并通过 $emit('input') 更新父组件的数据。

4. 使用 `v-bind` 和 `v-on`

通过 v-bind 和 v-on 手动实现双向绑定。

父组件

<template>
  <ChildComponent :message="message" @update-message="message = $event" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
};
</script>

子组件

<template>
  <input :value="message" @input="$emit('update-message', $event.target.value)" />
</template>

<script>
export default {
  props: ['message'],
};
</script>

说明：
- 父组件通过 v-bind 传递数据，通过 v-on 监听子组件的事件。
- 子组件通过 props 接收数据，并通过 $emit 更新父组件的数据。

5. 使用 `provide` 和 `inject`

对于深层嵌套的组件，可以使用 provide 和 inject 实现双向绑定。

父组件

<template>
  <ChildComponent />
</template>

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

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

子组件

<template>
  <input :value="message" @input="updateMessage($event.target.value)" />
</template>

<script>
export default {
  inject: ['message', 'updateMessage'],
};
</script>

说明：
- 父组件通过 provide 提供数据和更新方法。
- 子组件通过 inject 注入数据和方法。

6. 使用 Vuex（全局状态管理）

对于复杂的应用，可以使用 Vuex 管理全局状态，实现父子组件之间的双向绑定。

父组件

<template>
  <ChildComponent />
</template>

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

export default {
  components: {
    ChildComponent,
  },
};
</script>

子组件

<template>
  <input :value="message" @input="updateMessage($event.target.value)" />
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['message']),
  },
  methods: {
    ...mapMutations(['updateMessage']),
  },
};
</script>

说明：
- 使用 Vuex 管理 message 状态。
- 子组件通过 mapState 获取状态，通过 mapMutations 更新状态。

总结

方法	适用场景	说明
`v-model`	简单的父子组件双向绑定	语法糖，基于 `:value` 和 `@input`
`.sync` 修饰符	简单的父子组件双向绑定	语法糖，基于 `:prop` 和 `@update:prop`
`v-bind` 和 `v-on`	手动实现双向绑定	灵活，但代码量较多
`provide` 和 `inject`	深层嵌套组件	适合跨层级组件通信
Vuex	全局状态管理	适合复杂应用