Vue中的事件綁定與解綁方式
更新時間：2022年10月13日 15:08:46 作者：“玫瑰無原則?”
這篇文章主要介紹了Vue中的事件綁定與解綁方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
事件綁定
基礎(chǔ)知識
使用場景
- 子組件==>父組件傳數(shù)據(jù)
- 在父組件中給子組件綁定自定義事件，事件的回調(diào)在父組件中。
注意事項
組件上，默認綁定的事件為自定義事件；綁定原生事件的時候需要添加 native修飾符。
- 綁定一個名為click的自定義事件：<Demo @click="test"/>
- 綁定一個click原生事件：<Demo @click.native="test"/>
v-on 綁定事件
語法
綁定事件在父組件中進行：
方法一：@事件名稱=“函數(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">點我傳遞學生信息</button>
?
</template>
?
<script>
?
export default {
? name: "Student",
? data() {
? ? return {
? ? ? name: "張三",
? ? ? age: 18,
? ? };
? },
? methods: {
? ? sendStudent() {
? ? ? this.$emit("demo", this.name);
? ? ? //demo為事件名稱，對應父組件的@demo事件
? ? ? //傳遞this.named這個參數(shù)
? ? },
? },
?
};
</script>?$ref綁定事件
語法
綁定事件在父組件中進行：
<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為事件名稱 需要對應父組件的事件名稱
? ? },
? ?
};
</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)文章
這篇文章主要為大家介紹了創(chuàng)建和運行Vue.js項目方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了解決nuxt 自定義全局方法,全局屬性,全局變量的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本文主要介紹了Vite圖片資源打包優(yōu)化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題
這篇文章主要介紹了關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vuejs對象常用操作之取對應的值、取key和value值、轉(zhuǎn)數(shù)組及合并等
最近在學Vue和javascript感覺js的好多方法都不太清楚,這里徹底總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vuejs對象常用操作之取對應的值、取key和value值、轉(zhuǎn)數(shù)組及合并等的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue3跨域解決方案詳解,需要的朋友可以參考下2023-01-01
Vue?Property?Decorator提供了一些裝飾器，包括@Prop、@Watch、@Emit、@Inject、@Provide、@Model等等，本文主要來和大家講講它們的使用方法，需要的可以參考一下2023-07-07
vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要為大家介紹了Vue之mixin混入，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要向大家分享的是Vue?中插槽的使用總結(jié)，包括內(nèi)容有默認插槽、具名插槽、作用域插槽等內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04