Vue組件中的自定義事件是什么

小編給大家分享一下Vue組件中的自定義事件是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

主要介紹組件的自定義事件的概念，使用等。

何為組件自定義事件：

• 組件自定義事件是一種組件間的通信方式，方向是 子組件====>父組件。

• 使用場景：A是子組件，B是父組件，如果要把B的數(shù)據(jù)傳給A，可以使用props配置項，如果要把A的數(shù)據(jù)轉(zhuǎn)給B，就要用到組件自定義事件或者使用props加回調(diào)函數(shù)也可實現(xiàn)。

先使用props加回調(diào)函數(shù)實現(xiàn)子組件傳遞數(shù)據(jù)給父組件。

main.js：

//引入vue依賴
import Vue from 'vue'
//引入組件App
import App from './App.vue'
// 關(guān)閉生產(chǎn)提示
Vue.config.productionTip = false
//創(chuàng)建一個vue實例
new Vue({
  //這個目前還沒學(xué)過，先知道他的作用是將app放入容器中。
  render: h => h(App),
  //配置該vue實例管理id為app的容器
}).$mount('#app')

App.vue：

<template>
    <!-- 編寫結(jié)構(gòu) -->
    <div>
        <!-- 傳遞回調(diào)函數(shù)給子組件School -->
        <school :getSchoolNameFromSchoolVc="getSchoolNameFromSchoolVc"></school>
    <hr>
    <student></student>
    <div>App獲取School子組件的學(xué)校名：{{schoolNameFromSchool}}</div>
    </div>
</template>
<script>
// 原本的引入
// import school from "./School.vue"
// import student from "./Student.vue"
//修改后的
//引入school組件和student組件,涉及es模塊化的語法
import school from "./components/School.vue"
import student from "./components/Student.vue"
export default {
    data() {
        return {
            schoolNameFromSchool:""
        }
    },
    components:{
        //注冊組件
        school,
        student
    },
    methods:{
        //定義一個回調(diào)函數(shù)并傳遞給子組件School
        getSchoolNameFromSchoolVc(schoolName){
            console.log("App獲取School子組件的學(xué)校名：",schoolName);
            //賦值給schoolNameFromSchool
            this.schoolNameFromSchool = schoolName;
        }
    }
}
</script>
<style>
</style>

schoo.vue：

<template>
    <!-- 編寫組件結(jié)構(gòu)代碼，也就是html代碼 -->
    <!-- 需要一個div括住，也就是只能有一個根元素，一般使用div -->
    <div class="orange">
        <div>學(xué)校：{{schoolName}}</div>
        <div>地址：{{schoolAddress}}</div>
        <!-- //定義一個按鈕，點擊傳遞學(xué)校名稱給App組件。 -->
        <button @click="sendSchoolNameToApp">傳遞學(xué)校名給App組件</button>
    </div>
</template>
<script>
//交互代碼編寫的地方，需要暴露出去給其他地方引入
//這個需要有一點es6模塊化的知識，這里一般使用默認(rèn)暴露，因為這是單文件組件，只需要暴露一個組件對象，
//并且引入默認(rèn)暴露的組件引入語法比較簡單。
export default {
    data() {
        return {
        schoolName:"尚硅谷",
        schoolAddress:"北京"
        }
    },
    //接收回調(diào)函數(shù)
    props:["getSchoolNameFromSchoolVc"],
    methods:{
       sendSchoolNameToApp(){
           //調(diào)用回調(diào)函數(shù)，并把學(xué)校名傳遞進去
           this.getSchoolNameFromSchoolVc(this.schoolName)
       }     
    }
}
</script>
<style scoped>
    /* 編寫樣式的地方 */
    .orange{
        background-color: orange;
    }
</style>

student.vue：

<template>
    <!-- 編寫組件結(jié)構(gòu)代碼，也就是html代碼 -->
    <!-- 需要一個div括住，也就是只能有一個根元素，一般使用div -->
    <div class="orange">
        <div>學(xué)生姓名：{{studentName}}</div>
        <div>年齡：{{studentAge}}</div>
    </div>
</template>
<script>
//交互代碼編寫的地方，需要暴露出去給其他地方引入
//這個需要有一點es6模塊化的知識，這里一般使用默認(rèn)暴露，因為這是單文件組件，只需要暴露一個組件對象，
//并且引入默認(rèn)暴露的組件引入語法比較簡單。
export default {
    data() {
        return {
        studentName:"張三",
        studentAge:18
        }
    },
}
</script>
<style>
    /* 編寫樣式的地方 */
    .orange{
        background-color: gray;
    }
</style>

這種方式的流程：

1.在父組件(App)中定義一個回調(diào)方法并傳遞給子組件(School)。

該回調(diào)方法是把School組件傳遞過來的學(xué)校名渲染在App組件對應(yīng)的區(qū)域。

2.子組件使用props配置項接收回調(diào)函數(shù)，并且編寫一個按鈕，點擊就調(diào)用該回調(diào)函數(shù)把數(shù)據(jù)傳遞到App組件中。

效果：

第二種方式是使用組件自定義事件實現(xiàn)：

使用組件自定義事件實現(xiàn)把子組件Student的學(xué)生名傳遞到App組件，并進行渲染。

分一下步驟：

3. 在父組件App中，設(shè)置自定義事件，并配置一個事件回調(diào)

4. 在子組件中，觸發(fā)自定義事件，把值傳過去。

效果：

除了在組件標(biāo)簽中綁定自定義事件，也可以配合ref屬性在生命周期回調(diào)函數(shù)$mounted中進行綁定。

執(zhí)行效果一樣的。

自定義事件照樣可以使用事件修飾符once。

使用props或者組件自定義事件進行子組件像父組件傳遞數(shù)據(jù)的方式是比較像的。

props的方式是直接把回調(diào)函數(shù)傳遞給子組件調(diào)用。

而組件自定義事件是把回調(diào)函數(shù)通過事件的方式暴露出去，然后子組件通過觸發(fā)事件，達到調(diào)用回調(diào)函數(shù)的效果。

解綁組件自定義事件：

或者組件被銷毀時，這些自定義事件會被銷毀。

以上是“Vue組件中的自定義事件是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！