技術文章 » 深入瞭解Vue元件中的自定義事件

深入瞭解Vue元件中的自定義事件

2022-04-06 22:00:12
什麼是元件自定義事件？本篇文章帶大家深入瞭解下元件中的自定義事件，聊聊自定義事件注意點，希望對大家有所幫助！

元件的自定義事件是一種元件間的通訊方式，它適用於子元件向父元件傳遞資料或行為。（學習視訊分享：）

原理圖

1.png

元件的自定義事件注意點：

  • 1.元件的自定義事件實現的就是子元件向父元件通訊的功能，所以，自定義事件的繫結動作需要在父元件中完成

  • 2.元件的自定義事件的觸發動作需要在子元件中完成，給誰繫結的事件，就找誰觸發

在瞭解元件的自定義事件之前，我們也瞭解過props，props也能實現子元件向父元件通訊，接下來，我將從props的方式過渡到元件的自定義事件，以便大家能夠更好的理解元件的自定義事件，也可以對比這兩種方式存在的差異和相似之處

通過props實現元件間通訊

App.vue中：

<!-- 通過父元件給子元件傳遞函數型別的props實現：子給父傳遞資料 -->
<TestA :getName="getName"/>
...
...
<script>
import TestA from './components/TestA'
	export default {
		name:'App',
		components:{TestA},
		data(){
			return{
				msg:'你好呀'
			}
		},
		methods:{
			getName(name){
				console.log('App元件收到了資料', name)
			},
		},
	}
</script>

程式碼片段中getName()方法中的name引數用於接收子元件傳遞過來的引數

TestA.vue：

<!--通過點選事件傳遞資料-->
<button @click="sendName">將姓名傳送給App元件</button>
...
...
<script>
export default {
    name:'TestA',
    //接收父元件傳遞過來的props
    props:["getName"],
    data(){
        return{
            name:'路飛',
            age:18
        }
    },
    methods:{
        sendName(){
            //點選按鈕後，觸發此方法，傳遞name給父元件
            this.getName(this.name)
        }
    }
}
</script>

以上是用props實現的子元件向父元件傳遞資料

效果圖如下：

頁面初始化效果：

2.png

點選按鈕後：

3.png

通過圖上可以看出，當點選按鈕之後，控制檯輸出了父元件收到的資料，子元件通過props的方式向父元件傳遞了資料

通過元件的自定義事件實現元件間通訊

首先第一步，就是要給元件繫結一個自定義事件，文章開始就說，繫結自定義事件是在父元件中完成的：

4.png

其次，在子元件中，需要對自定義事件進行觸發，完成元件自定義事件通訊:

5.png

效果圖如下：

頁面初始化效果：

6.png

點選按鈕後：

7.png

通過圖上可以看出，當點選按之後，控制檯輸出了父元件收到的資料。

通過以上兩種通訊方式，我們可以發現，子元件通過props方式向父元件傳遞資料，前提是父元件要給子元件傳遞一個回撥函數，子元件接收之後，才能向父元件傳遞資料，而元件的自定義事件只需呼叫 $emit 方法對指定自定義事件進行觸發，即可向父元件傳遞資料。

元件自定義事件其他知識點

自定義元件繫結的第二種方式

App.vue:

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<!-- 通過父元件給子元件傳遞函數型別的props實現：子給父傳遞資料 -->
		<TestA :getName="getName"/>
		<!-- 通過父元件給子元件繫結一個自定義事件實現：子給父傳遞資料 -->
    <!--方法二-->
		<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('我收到了資料', name)
			},
			send(name){
				console.log("send被呼叫了", name)
			}
		},
		mounted(){
			this.$refs.testb.$on('demo', this.send);
		}
	}
</script>

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

通過ref屬性拿到TestB元件元件的範例物件（vc），在元件掛載完成之後（mounted）使用this.$refs.元件名.$on('自定義事件名', 回撥函數)完成對子元件自定義事件的繫結，同樣也能實現效果。

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

一次性自定義事件

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

自定義事件的解綁

當我們使用完自定義事件後，可以解綁自定義事件，這樣做的好處是，儘量降低對程式效能的佔用，提高程式執行的效率

自定義的解綁動作也是在子元件中進行，簡單來說也就是，給誰繫結的就找誰解綁

TestB中

<template>
  <div>
      <h2>籍貫：{{native}}</h2>
      <h2>詳細地址：{{adress}}</h2>
      <button @click="sendNative">點選觸發自定義事件</button>
      <button @click="noBand">解綁自定義事件</button>
  </div>
</template>

<script>
export default {
    name:'TestB',
    data(){
        return{
            native:'東海',
            adress:'東海風車村'
        }
    },
    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>

還有一個點就是，假若有很多自定義事件需要解綁，那可以這麼寫：

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

直接不用傳遞任何引數，這樣寫的話，只要是給此元件繫結的任何自定義事件都會解綁。

總結

以上內容就是元件的自定義事件的使用，自定義事件雖然在中不是一個非常重要的點，但是也是一個實際開發中比較常用的點，在進行某些業務操作時，使用自定義事件可能會節省開發時間以及優化程式碼，減少程式碼冗餘量，元件自定義事件的具體操作還要看所處的業務邏輯和行為是什麼。

8.png

如果覺得內容不錯的話，記得點贊收藏~~~

（學習視訊分享：）

以上就是深入瞭解Vue元件中的自定義事件的詳細內容，更多請關注TW511.COM其它相關文章！