vue3-父子组件的双向绑定

在 Vue 3 中，父子组件之间的双向绑定可以通过多种方式实现。以下是几种常见的方法：

1. 使用 v-model

v-model 是 Vue 提供的用于实现双向绑定的指令。它可以在父组件中使用，并在子组件中定义。

子组件 (ChildComponent.vue)

<template>  
  <input v-model="modelValue" @input="$emit('update:modelValue', modelValue)" />  
</template>  

<script setup>  
import { defineProps, defineEmits } from 'vue';  

const props = defineProps({  
  modelValue: String,  
});  

const emit = defineEmits();  
</script>  

父组件 (ParentComponent.vue)

<template>  
  <ChildComponent v-model="text" />  
  <p>Text: {{ text }}</p>  
</template>  

<script>  
import { ref } from 'vue';  
import ChildComponent from './ChildComponent.vue';  

export default {  
  components: {  
    ChildComponent,  
  },  
  setup() {  
    const text = ref('Hello, Vue 3!');  
    return { text };  
  },  
};  
</script>  

2. 使用 Props 和 Emits

通过 props 和 emits 手动实现双向绑定。

子组件 (ChildComponent.vue)

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

<script setup>  
import { defineProps, defineEmits } from 'vue';  

const props = defineProps({  
  value: String,  
});  

const emit = defineEmits();  

const updateValue = (event) => {  
  emit('update:value', event.target.value);  
};  
</script>  

父组件 (ParentComponent.vue)

<template>  
  <ChildComponent :value="text" @update:value="text = $event" />  
  <p>Text: {{ text }}</p>  
</template>  

<script>  
import { ref } from 'vue';  
import ChildComponent from './ChildComponent.vue';  

export default {  
  components: {  
    ChildComponent,  
  },  
  setup() {  
    const text = ref('Hello, Vue 3!');  
    return { text };  
  },  
};  
</script>  

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

如果你想要使用自定义事件名，可以在子组件中使用 v-model 的自定义事件。

子组件 (ChildComponent.vue)

<template>  
  <input v-model="localValue" @input="updateValue" />  
</template>  

<script setup>  
import { ref, defineProps, defineEmits } from 'vue';  

const props = defineProps({  
  modelValue: String,  
});  

const emit = defineEmits();  
const localValue = ref(props.modelValue);  

const updateValue = () => {  
  emit('update:modelValue', localValue.value);  
};  
</script>  

父组件 (ParentComponent.vue)

<template>  
  <ChildComponent v-model="text" />  
  <p>Text: {{ text }}</p>  
</template>  

<script>  
import { ref } from 'vue';  
import ChildComponent from './ChildComponent.vue';  

export default {  
  components: {  
    ChildComponent,  
  },  
  setup() {  
    const text = ref('Hello, Vue 3!');  
    return { text };  
  },  
};  
</script>  

4. 使用 Provide/Inject

在某些情况下，可以使用 provide 和 inject 来实现更复杂的双向绑定。

父组件 (ParentComponent.vue)

<template>  
  <ChildComponent />  
  <p>Text: {{ text }}</p>  
</template>  

<script>  
import { ref, provide } from 'vue';  
import ChildComponent from './ChildComponent.vue';  

export default {  
  components: {  
    ChildComponent,  
  },  
  setup() {  
    const text = ref('Hello, Vue 3!');  
    provide('text', text);  
    return { text };  
  },  
};  
</script>  

子组件 (ChildComponent.vue)

<template>  
  <input :value="text" @input="updateText" />  
</template>  

<script setup>  
import { inject } from 'vue';  

const text = inject('text');  

const updateText = (event) => {  
  text.value = event.target.value;  
};  
</script>  

总结

以上是实现父子组件双向绑定的几种常见方法。选择哪种方法取决于具体的需求和场景。v-model 是最常用和推荐的方式，因为它简洁且易于理解。