Vue中組件之間的數(shù)據(jù)傳遞可以使用props和$emit來(lái)實(shí)現(xiàn)。

1.使用props傳遞數(shù)據(jù)：父組件可以通過(guò)子組件的props屬性向子組件傳遞數(shù)據(jù)。

父組件中：

<template><div><child-component :message="parentMessage"></child-component></div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';export default {data() {return {parentMessage: 'Hello from parent component'};},components: {ChildComponent}
}
</script>

子組件中：

<template><div><p>{{ message }}</p></div>
</template>
<script>
export default {props: ['message']
}
</script>

2.使用$emit實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)：子組件可以通過(guò)$emit方法來(lái)觸發(fā)父組件中的事件，并將數(shù)據(jù)作為參數(shù)傳遞給父組件。

父組件中：

<template><div><child-component @childEvent="handleChildEvent"></child-component><p>{{ childMessage }}</p></div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';export default {data() {return {childMessage: ''};},components: {ChildComponent},methods: {handleChildEvent(message) {this.childMessage = message;}}
}
</script>

子組件中：

<template><div><button @click="triggerEvent">Send Message</button></div>
</template>
<script>
export default {methods: {triggerEvent() {this.$emit('childEvent', 'Hello from child component');}}
}
</script>

在父組件中定義一個(gè)方法來(lái)接收子組件傳遞的數(shù)據(jù)，并將該方法綁定到子組件的事件上，當(dāng)點(diǎn)擊子組件按鈕時(shí)，會(huì)觸發(fā)該事件，并將數(shù)據(jù)傳遞給父組件。父組件通過(guò)接收到的數(shù)據(jù)來(lái)更新自己的數(shù)據(jù)，并渲染到頁(yè)面上。