Vue中的事件綁定與解綁方式
更新時間：2022年10月13日 15:08:46 作者：“玫瑰無原則?”
這篇文章主要介紹了Vue中的事件綁定與解綁方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
事件綁定
基礎(chǔ)知識
使用場景
- 子組件==>父組件傳數(shù)據(jù)
- 在父組件中給子組件綁定自定義事件，事件的回調(diào)在父組件中。
注意事項
組件上，默認(rèn)綁定的事件為自定義事件；綁定原生事件的時候需要添加 native修飾符。
- 綁定一個名為click的自定義事件：<Demo @click="test"/>
- 綁定一個click原生事件：<Demo @click.native="test"/>
v-on 綁定事件
語法
綁定事件在父組件中進(jìn)行：
方法一：@事件名稱=“函數(shù)名稱”
<Demo @atguigu="test"/>?
方法二：v-on:事件名稱=“函數(shù)名稱”
<Demo v-on:atguigu="test"/>??
在methods中配置回調(diào)函數(shù)
子組件傳遞參數(shù)：
?<button @click="觸發(fā)事件函數(shù)">結(jié)構(gòu)中定義觸發(fā)事件</button>? ??
觸發(fā)事件函數(shù)中使用 this.$emit("事件名稱", 參數(shù)); 傳遞參數(shù)
實例
父組件：
<template>
?
? <Student @demo="Demotest" />
? //這里demo為事件名稱 ?Demotest為函數(shù)名稱
?
</template>
?
<script>
import Student from "./Student.vue";
?
export default {
? name: "School",
? components: {
? ? Student,
? },
? methods: {
? ? Demotest(name) {
? ? ? console.log("我是父組件，我是用v-on綁定事件傳遞參數(shù)", name);
? ? },
? },
};
</script>子組件：
<template>
?
? ? <button @click="sendStudent">點我傳遞學(xué)生信息</button>
?
</template>
?
<script>
?
export default {
? name: "Student",
? data() {
? ? return {
? ? ? name: "張三",
? ? ? age: 18,
? ? };
? },
? methods: {
? ? sendStudent() {
? ? ? this.$emit("demo", this.name);
? ? ? //demo為事件名稱，對應(yīng)父組件的@demo事件
? ? ? //傳遞this.named這個參數(shù)
? ? },
? },
?
};
</script>?$ref綁定事件
語法
綁定事件在父組件中進(jìn)行：
<School ref= "實例名稱" ></School>
this.$refs.實例名稱.$on("觸發(fā)事件名稱", 回調(diào)函數(shù))
子組件傳遞參數(shù)：
<button @click="觸發(fā)事件函數(shù)">結(jié)構(gòu)中定義觸發(fā)事件</button>
觸發(fā)事件函數(shù)中使用 this.$emit("事件名稱", 參數(shù)); 傳遞參數(shù)
實例
父組件：
<template>
?
? ? <Student ref="student" />
? ? //student為實例名稱并非函數(shù)名稱
?
</template>
?
<script>
import Student from "./Student.vue";
export default {
? name: "School",
? components: {
? ? Student,
? },
? methods: {
? ? getStusentName(name) {
? ? ? console.log("school收到了student的名字", name);
? ? },
? },
? mounted() {
? ? ? console.log(this.$refs.student.$on("aaa", this.getStusentName));
? ? ? //student是實例名稱 ?aaa是事件名稱
? ? ? //getStusentName 是回調(diào)函數(shù) ?此處只能在methods配置回調(diào)函數(shù)或者使用箭頭函數(shù)否則this指向會出問題
? },
};
</script>子組件：
<template>
?
? ? <button @click="sendStudentName">點我傳遞Studentname</button>
? ? //此處sendStudentName為觸發(fā)事件的函數(shù)名稱
?
</template>
?
<script>
?
export default {
? name: "Student",
? data() {
? ? return {
? ? ? name: "張三",
? ? ? age: 18,
? ? };
? },
? methods: {
? ? sendStudentName() {
? ? ? this.$emit("aaa", this.name);
? ? //aaa為事件名稱 需要對應(yīng)父組件的事件名稱
? ? },
? ?
};
</script>?事件解綁
語法
- 解綁一個自定義事件：this . $off('事件名稱') //字符串形式
- 解綁多個自定義事件：this .$off([ ' 事件1', '事件2']) //數(shù)組形式
- 解綁所有自定義事件：this.$off() //無參
組件實例對象銷毀，此組件身上的自定義事件全部失效
vm 實例對象銷毀， vm的所有 組件實例對象 身上的自定義事件全部失效
實例
mounted() {? ?
? ? ? console.log(this.$refs.student.$on("aaa", this.getStusentName));??
? },
?
beforeDestroy() {? ? ?
? ? ?this.$off("aaa");?
}總結(jié)
v-on比$ref更加簡單，但是$ref更加更加靈活。不局限于函數(shù)中而是可以分布在各個位置。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)日歷備忘錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了vue項目打包步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue項目開啟Gzip壓縮和性能優(yōu)化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue element中axios下載文件（后端Python）
這篇文章主要介紹了vue element中axios下載文件（后端Python）的實例代碼，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue中的同步調(diào)用和異步調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別
這篇文章主要介紹了vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，需要的小伙伴可以參考一下2022-07-07
element-ui table行點擊獲取行索引（index）并利用索引更換行順序
這篇文章主要介紹了element-ui table行點擊獲取行索引（index）并利用索引更換行順序，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
對vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解
今天小編就為大家分享一篇對vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue路由跳轉(zhuǎn)傳參數(shù)的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue首屏加載過慢出現(xiàn)白屏的6種優(yōu)化方案匯總
vue項目打包上線后,首次打開會發(fā)現(xiàn)加載很慢,出現(xiàn)白屏的問題,下面這篇文章主要給大家介紹了關(guān)于Vue首屏加載過慢出現(xiàn)白屏的6種優(yōu)化方案,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02