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>
学而不思则罔,思而不学则殆!