Vue元件中的自定義事件你瞭解多少

2022-02-16 13:00:41

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

何為元件自定義事件：

元件自定義事件是一種元件間的通訊方式，方向是子元件====>父元件。
使用場景：A是子元件，B是父元件，如果要把B的資料傳給A，可以使用props設定項，如果要把A的資料轉給B，就要用到元件自定義事件或者使用props加回撥函數也可實現。

先使用props加回撥函數實現子元件傳遞資料給父元件。

main.js：

//引入vue依賴
import Vue from 'vue'
//引入元件App
import App from './App.vue'
// 關閉生產提示
Vue.config.productionTip = false
//建立一個vue範例
new Vue({
  //這個目前還沒學過，先知道他的作用是將app放入容器中。
  render: h => h(App),
  //設定該vue範例管理id為app的容器
}).$mount('#app')

App.vue：

<template>
    <!-- 編寫結構 -->
    <div>
        <!-- 傳遞迴撥函數給子元件School -->
        <school :getSchoolNameFromSchoolVc="getSchoolNameFromSchoolVc"></school>
    <hr>
    <student></student>
    <div>App獲取School子元件的學校名：{{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:{
        //定義一個回撥函數並傳遞給子元件School
        getSchoolNameFromSchoolVc(schoolName){
            console.log("App獲取School子元件的學校名：",schoolName);
            //賦值給schoolNameFromSchool
            this.schoolNameFromSchool = schoolName;
        }
    }
}
</script>
<style>
</style>

schoo.vue：

<template>
    <!-- 編寫元件結構程式碼，也就是html程式碼 -->
    <!-- 需要一個div括住，也就是隻能有一個根元素，一般使用div -->
    <div class="orange">
        <div>學校：{{schoolName}}</div>
        <div>地址：{{schoolAddress}}</div>
        <!-- //定義一個按鈕，點選傳遞學校名稱給App元件。 -->
        <button @click="sendSchoolNameToApp">傳遞學校名給App元件</button>
    </div>
</template>
<script>
//互動程式碼編寫的地方，需要暴露出去給其他地方引入
//這個需要有一點es6模組化的知識，這裡一般使用預設暴露，因為這是單檔案元件，只需要暴露一個元件物件，
//並且引入預設暴露的元件引入語法比較簡單。
export default {
    data() {
        return {
        schoolName:"尚矽谷",
        schoolAddress:"北京"
        }
    },
    //接收回撥函數
    props:["getSchoolNameFromSchoolVc"],
    methods:{
       sendSchoolNameToApp(){
           //呼叫回撥函數，並把學校名傳遞進去
           this.getSchoolNameFromSchoolVc(this.schoolName)
       }     
    }
}
</script>
<style scoped>
    /* 編寫樣式的地方 */
    .orange{
        background-color: orange;
    }
</style>

student.vue：

<template>
    <!-- 編寫元件結構程式碼，也就是html程式碼 -->
    <!-- 需要一個div括住，也就是隻能有一個根元素，一般使用div -->
    <div class="orange">
        <div>學生姓名：{{studentName}}</div>
        <div>年齡：{{studentAge}}</div>
    </div>
</template>
<script>
//互動程式碼編寫的地方，需要暴露出去給其他地方引入
//這個需要有一點es6模組化的知識，這裡一般使用預設暴露，因為這是單檔案元件，只需要暴露一個元件物件，
//並且引入預設暴露的元件引入語法比較簡單。
export default {
    data() {
        return {
        studentName:"張三",
        studentAge:18
        }
    },
}
</script>
<style>
    /* 編寫樣式的地方 */
    .orange{
        background-color: gray;
    }
</style>

這種方式的流程：

1.在父元件(App)中定義一個回撥方法並傳遞給子元件(School)。