目錄父子組件之間的通信：props與emit常規(guī)使用子組件向父組件傳遞消息與emit的區(qū)別：定義和調(diào)用的不同父子組件之間的通信：props與emit

通常提到props，都會(huì)想到的是父組件給子組件傳值；提到emit為子組件向父組件發(fā)送消息，但其實(shí)，props也可以使子組件向父組件傳遞消息

方式為在父組件中通過(guò)為子組件綁定屬性，子組件接收；但其實(shí)，我們只需要父組件向子組件傳遞一個(gè)事件，使子組件調(diào)用該事件來(lái)獲取子組件的消息

常規(guī)使用<!-- 子組件A --><template> <div style='color:coral'> 我是B的子組件A </div></template><script setup>import { onMounted } from 'vue';const props = defineProps({ msg: String})onMounted(() => { console.log('我是A，我接收到B給我傳遞的消息', props);})</script><!-- 父組件B --><template> <div> <h1>我是父組件B，下面是我的子組件A</h1> <A msg='我是父組件B，我現(xiàn)在向A組件傳遞消息'></A> </div></template><script setup>import A from '../components/A.vue'</script>

子組件向父組件傳遞消息<!-- 子組件A --><template> <div style='background:gainsboro'> <h3 style='color:coral'>我是B的子組件A</h3> <button @click='send'>向B發(fā)消息</button> </div></template><script setup>import { onMounted } from 'vue';const props = defineProps({ msg: String, myFn: Function})onMounted(() => { console.log('我是紅薯我是紅薯，收到收到', props);})const send = () => { props.myFn('我是A,我調(diào)用B的事件向它發(fā)送此消息：嘿~土豆')}</script><!-- 父組件B --><template> <div> <p>我是父組件B，我傳遞給A組價(jià)的事件，A調(diào)用后我可以接收到： <span style='color:darkorange'>{{state.childMsg}}</span> </p> <h1>我是父組件B，下面是我的子組件A</h1> <A msg='我是土豆我是土豆，收到請(qǐng)回答' :myFn='state.fn' ></A> </div></template><script setup>import { reactive } from 'vue';import A from '../components/A.vue'const state = reactive({ childMsg: '暫無(wú)消息', fn: (data) => { state.childMsg = data }})</script>

當(dāng)子組件A點(diǎn)擊“向B發(fā)送消息” 調(diào)用了這個(gè)myFn的函數(shù)，并且傳遞參數(shù)，父組件B中就可以收到A傳遞的參數(shù)，此時(shí)就完成了子組件行父組件傳遞消息

與emit的區(qū)別：定義和調(diào)用的不同

props方式：父組件為子組件綁定一個(gè)屬性，將函數(shù)賦值給該屬性，子組件通過(guò)props接收，調(diào)用此事件，傳遞消息。emit方式：父組件需要在子組件標(biāo)簽中注冊(cè)一個(gè)事件，子組件通過(guò)emit調(diào)用此事件，傳遞消息。

到此這篇關(guān)于詳解Vue3子組件向父組件傳遞消息的文章就介紹到這了,更多相關(guān)Vue3子組件向父組件傳遞消息內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！