深入了解Vue元件中的自訂事件

什麼是元件自訂事件？這篇文章帶大家深入了解下Vue元件中的自訂事件，聊聊自訂事件注意點，希望對大家有幫助！

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

原理圖

#元件的自訂事件注意點：

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

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

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

透過props實作元件間通訊

App.vue中：

<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
<TestA :getName="getName"/>
...
...
<script>
import TestA from &#39;./components/TestA&#39;
	export default {
		name:&#39;App&#39;,
		components:{TestA},
		data(){
			return{
				msg:&#39;你好呀&#39;
			}
		},
		methods:{
			getName(name){
				console.log(&#39;App组件收到了数据&#39;, name)
			},
		},
	}
</script>

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

TestA.vue：

<!--通过点击事件传递数据-->
<button @click="sendName">将姓名发送给App组件</button>
...
...
<script>
export default {
    name:&#39;TestA&#39;,
    //接收父组件传递过来的props
    props:["getName"],
    data(){
        return{
            name:&#39;路飞&#39;,
            age:18
        }
    },
    methods:{
        sendName(){
            //点击按钮后，触发此方法，传递name给父组件
            this.getName(this.name)
        }
    }
}
</script>

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

效果圖如下：

頁面初始化效果：

##點擊按鈕後：

透過圖上可以看出，當點擊按鈕之後，控制台輸出了父元件收到的數據，子元件透過

props的方式向父元件傳遞了資料

透過元件的自訂事件實作元件間通訊

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

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

效果圖如下：

#頁面初始化效果：

點擊按鈕後：

透過圖上可以看出，點擊按之後，控制台輸出了父元件收到的資料。

透過以上兩種通訊方式，我們可以發現，子元件透過

props方式向父元件傳遞數據，前提是父元件要給子元件傳遞一個回呼函數，子元件接收之後，才能向父元件傳遞數據，而元件的自訂事件只需呼叫$emit 方法對指定自訂事件進行觸發，即可向父組件傳遞資料。

元件自訂事件其他知識點

自訂元件綁定的第二種方式

# App.vue:

<template>
	<div class="app">
		<h1 id="msg">{{msg}}</h1>
		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<TestA :getName="getName"/>
		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 -->
    <!--方法二-->
		<TestB ref="testb"/>
	</div>
</template>

<script>
import TestA from &#39;./components/TestA&#39;
import TestB from &#39;./components/TestB&#39;
	export default {
		name:&#39;App&#39;,
		components:{TestA, TestB},
		data(){
			return{
				msg:&#39;你好呀&#39;
			}
		},
		methods:{
			getName(name){
				console.log(&#39;我收到了数据&#39;, name)
			},
			send(name){
				console.log("send被调用了", name)
			}
		},
		mounted(){
			this.$refs.testb.$on(&#39;demo&#39;, 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 id="籍贯-native">籍贯：{{native}}</h2>
      <h2 id="详细地址-adress">详细地址：{{adress}}</h2>
      <button @click="sendNative">点击触发自定义事件</button>
      <button @click="noBand">解绑自定义事件</button>
  </div>
</template>

<script>
export default {
    name:&#39;TestB&#39;,
    data(){
        return{
            native:&#39;东海&#39;,
            adress:&#39;东海风车村&#39;
        }
    },
    methods:{
        sendNative(){
            this.$emit(&#39;demo&#39;,this.native)
        },
        //解绑demo自定义事件
        noBand(){
            this.$off(&#39;demo&#39;);
        }
    }
    
}
</script>

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

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

{方法体内
    this.$off();
}

直接不用传递任何参数，这样写的话，只要是给此组件绑定的任何自定义事件都会解绑。

总结

以上内容就是组件的自定义事件的使用，自定义事件虽然在Vuejs中不是一个非常重要的点，但是也是一个实际开发中比较常用的点，在进行某些业务操作时，使用自定义事件可能会节省开发时间以及优化代码，减少代码冗余量，组件自定义事件的具体操作还要看所处的业务逻辑和行为是什么。

如果觉得内容不错的话，记得点赞收藏~~~

（学习视频分享：web前端开发）

以上是深入了解Vue元件中的自訂事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！