在vue3中,可以使用props和emit来实现父子组件之间的通信。子组件可以使用emit发出一个事件,父组件监听这个事件,并将数据传递给另一个子组件。
下面的简单例子中,ChildA组件有一个按钮,当按钮被点击时,会触发一个名为 value-changed的事件,并将一个值传递给父组件。父组件的handleValueChanged方法会捕获这个事件,并将接收到的值存储在本地状态中,然后这个值会通过props传递给ChildB组件。
子组件ChildA.vue
<template>
<button @click="sendValueToParent">Send Value to Parent</button>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "ChildA",
setup(props, { emit }) {
sendValueToParent() {
const value = 'Hello from Child A';
emit('value-changed', value);
}
return {
sendValueToParent,
};
},
});
</script>
父组件Parent.vue
<template>
<div>
<ChildA @value-changed="handleValueChanged" />
<ChildB :value="valueFromChildA" />
</div>
</template>
<script>
import { defineComponent } from 'vue';
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';
export default defineComponent({
name: "Parent",
components: {
ChildA,
ChildB
},
setup() {
const valueFromChildA = ref('');
function handleValueChanged(value) {
valueFromChildA.value = value;
};
return {
handleValueChanged,
}
}
})
</script>
子组件ChildB.vue
<template>
<div>{{ value }}</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: "ChildB",
props: {
value: {
type: String,
default: ''
}
},
setup() {
return {}
}
})
</script>