Vue中父组件读取或操作子组件数据的方法

1.通过v-model
2.通过props和emit
3.通过provide和inject
4.通过ref
5.通过事件总线EventBus或Mitt
6.通过Vuex/Pinia

1.通过v-modle

v-model 是 Vue 提供的用于双向绑定的语法糖，适用于父子组件之间的数据同步。

// 父组件
<template>
  <ChildComponent v-model="message" />
  <p>父组件数据：{{ message }}</p>
</template>
 
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
 
const message = ref('Hello, Vue3!');
</script>
// 子组件
<template>
  <input :value="modelValue" @input="emitValue($event)" />
</template>
 
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
 
function emitValue(newValue) {
  emit('update:modelValue', newValue); // 通知父组件更新
}
</script>
 

2.通过 props 和 emit

显式地使用 props 和 emit 来实现数据的传递与事件的触发。

// 父组件
<template>
  <ChildComponent :value="message" @update="updateMessage" />
</template>
 
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
 
const message = ref('Hello from Parent');
 
function updateMessage(newValue) {
  message.value = newValue;
}
</script>
 
// 子组件
<template>
  <input :value="value" @input="emitValue($event)" />
</template>
 
<script setup>
const props = defineProps(['value']);
const emit = defineEmits(['update']);
 
function emitValue(newValue) {
  emit('update', newValue); // 触发父组件方法
}
</script>
 
 

3. 使用 provide 和 inject

provide 和 inject 提供了一种父子（甚至祖孙）组件之间共享数据的方式。

// 父组件
<template>
  <ChildComponent />
</template>
 
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref, provide } from 'vue';
 
const message = ref('Shared Data');
provide('sharedMessage', message); // 提供数据
</script>
// 子组件
<template>
  <input v-model="sharedMessage" />
</template>
 
<script setup>
import { inject } from 'vue';
 
const sharedMessage = inject('sharedMessage'); // 注入数据
</script>