1.$refs的使用場景
目前累計(jì)服務(wù)客戶上千,積累了豐富的產(chǎn)品開發(fā)及服務(wù)經(jīng)驗(yàn)。以網(wǎng)站設(shè)計(jì)水平和技術(shù)實(shí)力,樹立企業(yè)形象,為客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)、網(wǎng)絡(luò)營銷、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。創(chuàng)新互聯(lián)始終以務(wù)實(shí)、誠信為根本,不斷創(chuàng)新和提高建站品質(zhì),通過對領(lǐng)先技術(shù)的掌握、對創(chuàng)意設(shè)計(jì)的研究、對客戶形象的視覺傳遞、對應(yīng)用系統(tǒng)的結(jié)合,為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,攜手廣大客戶,共同發(fā)展進(jìn)步。
父組件調(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ā)一個(gè)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í)行一個(gè)方法,然后取到子組件中傳遞過來的值。 </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)建一個(gè)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í)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前標(biāo)題:vue中$refs,$emit,$on,$once,$off的使用詳解
標(biāo)題網(wǎng)址:http://www.muchs.cn/article46/ijsghg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、企業(yè)建站、手機(jī)網(wǎng)站建設(shè)、App開發(fā)、外貿(mào)網(wǎng)站建設(shè)、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)