vue中$refs, $emit, $on, $once, $off的使用詳解
1.$refs的使用場景
父組件調(diào)用子組件的方法,可以傳遞數(shù)據(jù)。
父組件:
<div id="app"> <child-a ref="child"></child-a> <button @click="getMyEvent">點(diǎn)擊父組件</button> <div> <script> import ChildA from './child.vue' export default{ components:{ ChildA }, data(){ return { msg:'我是父組件的數(shù)據(jù)' } }, methods:{ getMyEvent(){ //調(diào)用子組件的方法,child是上邊ref起的名字,emitEvent是子組件的方法。 this.$refs.child.emitEvent(this.msg) } } } </script>
子組件:
<template> <button>點(diǎn)擊我</button> </template> <script> export default{ methods:{ emitEvent(msg){ console.log('接收的數(shù)據(jù)------'+msg) } } } </script>
2.$emit的使用
子組件調(diào)用父組件的方法并傳遞數(shù)據(jù)。
子組件:
<template> <button @click="emitEvent">點(diǎn)擊我</button> </template> <script> export default{ data(){ return{ msg:'我是子組件的數(shù)據(jù)' } }, methods:{ emitEvent(){ //通過按鈕的點(diǎn)擊事件觸發(fā)方法,然后用$emit觸發(fā)一個my-event的自定義方法,傳遞this.msg數(shù)據(jù)。 this.$emit('my-event',this.msg) } } } </script>
父組件:
<template> <div id="app"> <child-a @my-event="getMyEvent"></child-a> //父組件通過監(jiān)測my-event事件執(zhí)行一個方法,然后取到子組件中傳遞過來的值。 </div> </template> <script> import childA from './child.vue'; export default { components:{ childA }, methods:{ getMyEvent(msg){ console.log('接收數(shù)據(jù)---'+msg); //接收數(shù)據(jù),我是子組件的數(shù)據(jù) } } } </script>
3.$on的使用場景
兄弟組件之間相互傳遞數(shù)據(jù)。
首先創(chuàng)建一個Vue的空白實(shí)例(兄弟組件的橋梁)
import Vue from 'vue'; export default new Vue();
子組件A:發(fā)送放使用$emit自定義事件把數(shù)據(jù)帶過去。
<template> <div> <span>A組件-{{msg}}</span> <input type="button" value="把A組件數(shù)據(jù)傳遞給B" @click="send"> </div> </template> <script> import eventBus from './eventBus'; export default{ data(){ return{ msg:{ a:'111', b:'222' } } }, methods:{ send(){ eventBus.$emit('aevent',this.msg) } } } </script>
子組件B:接收方通過$on監(jiān)聽自定義事件的callback接收數(shù)據(jù)
<template> <div> <span>B組件,A傳的數(shù)據(jù)為--{{msg}}</span> </div> </template> <script> import eventBus from './eventBus.vue' export default { data(){ return{ msg:'' } }, mounted(){ eventBus.$on('aevent',(val)=>{//監(jiān)聽事件aevent,回調(diào)函數(shù)要使用箭頭函數(shù)。 console.log(val);//打印結(jié)果;我是a組件的數(shù)據(jù)。 }) } } </script>
父組件:
<template> <div> <childa></childa> <br/> <childb></childb> </div> </template> <script> import childa from './childa.vue'; import childb from './childb.vue'; export default{ componets:{ childa, childb }, data(){ return{ msg:'' } } } </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue如何使用formData傳遞文件類型的數(shù)據(jù)
這篇文章主要介紹了vue如何使用formData傳遞文件類型的數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05Ant Design Vue table中列超長顯示...并加提示語的實(shí)例
這篇文章主要介紹了Ant Design Vue table中列超長顯示...并加提示語的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05vue項(xiàng)目中使用qrcodesjs2生成二維碼簡單示例
最近項(xiàng)目中需生成二維碼,發(fā)現(xiàn)了很好用的插件qrcodesjs2,所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用qrcodesjs2生成二維碼的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05vue中使用router全局守衛(wèi)實(shí)現(xiàn)頁面攔截的示例
這篇文章主要介紹了vue中使用router全局守衛(wèi)實(shí)現(xiàn)頁面攔截的示例,幫助大家維護(hù)自己的項(xiàng)目,感興趣的朋友可以了解下2020-10-10Vue通過moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10vue ElementUI實(shí)現(xiàn)異步加載樹
這篇文章主要為大家詳細(xì)介紹了vue ElementUI實(shí)現(xiàn)異步加載樹,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06