Vue組件中的自定義事件源碼分析

這篇文章主要介紹“Vue組件中的自定義事件源碼分析”，在日常操作中，相信很多人在Vue組件中的自定義事件源碼分析問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue組件中的自定義事件源碼分析”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)北安免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

組件的自定義事件是一種組件間的通信方式，它適用于子組件向父組件傳遞數(shù)據(jù)或行為。

原理圖

組件的自定義事件注意點(diǎn)：

• 1.組件的自定義事件實(shí)現(xiàn)的就是子組件向父組件通信的功能，所以，自定義事件的綁定動(dòng)作需要在父組件中完成

• 2.組件的自定義事件的觸發(fā)動(dòng)作需要在子組件中完成，給誰綁定的事件，就找誰觸發(fā)

在了解組件的自定義事件之前，我們也了解過props，props也能實(shí)現(xiàn)子組件向父組件通信，接下來，我將從props的方式過渡到組件的自定義事件，以便大家能夠更好的理解組件的自定義事件，也可以對(duì)比這兩種方式存在的差異和相似之處

通過props實(shí)現(xiàn)組件間通信

App.vue中：

<!-- 通過父組件給子組件傳遞函數(shù)類型的props實(shí)現(xiàn)：子給父?jìng)鬟f數(shù)據(jù) -->
<TestA :getName="getName"/>
...
...
<script>
import TestA from './components/TestA'
	export default {
		name:'App',
		components:{TestA},
		data(){
			return{
				msg:'你好呀'
			}
		},
		methods:{
			getName(name){
				console.log('App組件收到了數(shù)據(jù)', name)
			},
		},
	}
</script>

代碼片段中getName()方法中的name參數(shù)用于接收子組件傳遞過來的參數(shù)

TestA.vue：

<!--通過點(diǎn)擊事件傳遞數(shù)據(jù)-->
<button @click="sendName">將姓名發(fā)送給App組件</button>
...
...
<script>
export default {
    name:'TestA',
    //接收父組件傳遞過來的props
    props:["getName"],
    data(){
        return{
            name:'路飛',
            age:18
        }
    },
    methods:{
        sendName(){
            //點(diǎn)擊按鈕后，觸發(fā)此方法，傳遞name給父組件
            this.getName(this.name)
        }
    }
}
</script>

以上是用props實(shí)現(xiàn)的子組件向父組件傳遞數(shù)據(jù)

效果圖如下：

頁(yè)面初始化效果：

點(diǎn)擊按鈕后：

通過圖上可以看出，當(dāng)點(diǎn)擊按鈕之后，控制臺(tái)輸出了父組件收到的數(shù)據(jù)，子組件通過props的方式向父組件傳遞了數(shù)據(jù)

通過組件的自定義事件實(shí)現(xiàn)組件間通信

首先第一步，就是要給組件綁定一個(gè)自定義事件，文章開始就說，綁定自定義事件是在父組件中完成的：

其次，在子組件中，需要對(duì)自定義事件進(jìn)行觸發(fā)，完成組件自定義事件通信:

效果圖如下：

頁(yè)面初始化效果：

點(diǎn)擊按鈕后：

通過圖上可以看出，當(dāng)點(diǎn)擊按之后，控制臺(tái)輸出了父組件收到的數(shù)據(jù)。

通過以上兩種通信方式，我們可以發(fā)現(xiàn)，子組件通過props方式向父組件傳遞數(shù)據(jù)，前提是父組件要給子組件傳遞一個(gè)回調(diào)函數(shù)，子組件接收之后，才能向父組件傳遞數(shù)據(jù)，而組件的自定義事件只需調(diào)用 $emit 方法對(duì)指定自定義事件進(jìn)行觸發(fā)，即可向父組件傳遞數(shù)據(jù)。

組件自定義事件其他知識(shí)點(diǎn)

自定義組件綁定的第二種方式

App.vue:

<template>
	<div class="app">
		<h2>{{msg}}</h2>
		<!-- 通過父組件給子組件傳遞函數(shù)類型的props實(shí)現(xiàn)：子給父?jìng)鬟f數(shù)據(jù) -->
		<TestA :getName="getName"/>
		<!-- 通過父組件給子組件綁定一個(gè)自定義事件實(shí)現(xiàn)：子給父?jìng)鬟f數(shù)據(jù) -->
    <!--方法二-->
		<TestB ref="testb"/>
	</div>
</template>

<script>
import TestA from './components/TestA'
import TestB from './components/TestB'
	export default {
		name:'App',
		components:{TestA, TestB},
		data(){
			return{
				msg:'你好呀'
			}
		},
		methods:{
			getName(name){
				console.log('我收到了數(shù)據(jù)', name)
			},
			send(name){
				console.log("send被調(diào)用了", name)
			}
		},
		mounted(){
			this.$refs.testb.$on('demo', this.send);
		}
	}
</script>

<style scoped>
.app{
	background-color: rgb(162, 255, 139);
	padding: 15px;
}
</style>

通過ref屬性拿到TestB組件組件的實(shí)例對(duì)象（vc），在組件掛載完成之后（mounted）使用this.$refs.組件名.$on('自定義事件名', 回調(diào)函數(shù))完成對(duì)子組件自定義事件的綁定，同樣也能實(shí)現(xiàn)效果。

而且，使用這種方式比較靈活，能完成一些操作，比如一次性自定義事件，延遲，判斷等等。

一次性自定義事件

v-on:事件名.once="XXXX
或者
this.$refs.student.$once("事件名", 事件內(nèi)容)

自定義事件的解綁

當(dāng)我們使用完自定義事件后，可以解綁自定義事件，這樣做的好處是，盡量降低對(duì)程序性能的占用，提高程序運(yùn)行的效率

自定義的解綁動(dòng)作也是在子組件中進(jìn)行，簡(jiǎn)單來說也就是，給誰綁定的就找誰解綁

TestB中

<template>
  <div>
      <h3>籍貫：{{native}}</h3>
      <h3>詳細(xì)地址：{{adress}}</h3>
      <button @click="sendNative">點(diǎn)擊觸發(fā)自定義事件</button>
      <button @click="noBand">解綁自定義事件</button>
  </div>
</template>

<script>
export default {
    name:'TestB',
    data(){
        return{
            native:'東海',
            adress:'東海風(fēng)車村'
        }
    },
    methods:{
        sendNative(){
            this.$emit('demo',this.native)
        },
        //解綁demo自定義事件
        noBand(){
            this.$off('demo');
        }
    }
    
}
</script>

<style scoped>
div{
    background-color: aquamarine;
    padding: 15px;
    margin-top: 5px;
}
</style>

還有一個(gè)點(diǎn)就是，假若有很多自定義事件需要解綁，那可以這么寫：

{方法體內(nèi)
    this.$off();
}

直接不用傳遞任何參數(shù)，這樣寫的話，只要是給此組件綁定的任何自定義事件都會(huì)解綁。

到此，關(guān)于“Vue組件中的自定義事件源碼分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

網(wǎng)頁(yè)名稱：Vue組件中的自定義事件源碼分析
網(wǎng)站路徑：http://bm7419.com/article4/pciiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、ChatGPT、品牌網(wǎng)站設(shè)計(jì)、云服務(wù)器、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)