Vue父子組件之間事件通信示例解析

更新時間：2023年03月16日 09:10:17 作者：時光劍客

這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

前言

組件間傳值的章節(jié)我們知道父組件給子組件傳值的時候，使用v-bind的方式定義一個屬性傳值，子組件根據(jù)這個屬性名去接收父組件的值，但是假如子組件想給父組件一些反饋呢？就不能使用這種方式來，而是使用事件的方式，父組件通過注冊這個事件的監(jiān)聽來接收子組件的信息，然后做對應(yīng)的操作。

示例解析

在前面的章節(jié)我們使用父組件傳遞過來的值做一個計數(shù)組件的時候，使用v-bind的方式傳值，這個時候父子組件間是單向數(shù)據(jù)流的方式，即子組件無法修改父組件傳來的值，所以做計數(shù)器組件的時候，子組件只能是拷貝一份父組件傳來的值，然后做計數(shù)操作，本章我們提供事件的方式實(shí)現(xiàn)計數(shù)的功能，思想就是，我們修改不了父組件傳遞過來的值，我們就可以通過事件通知父組件修改這個值：代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子組件通過事件進(jìn)行通信</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
    data() {
        return {
            count:1
        }
    },
    methods:{
        handleAddOne(){
            this.count += 1;
        }
    },
        template: 
        `
        <div>
            <counter :count = "count" @add-one="handleAddOne" />
        </div>
        `
    });
    app.component('counter',{
        props:['count'],
        emits:{
            addOne:(count) =>{
                if(count > 3){
                    alert(count);
                    return true;
                }
                return false;
            }
        },
        methods: {
            handleItemClick(){
                 this.$emit('addOne',this.count);
            }
        },
        template:`<div @click="handleItemClick">{{count}}</div>`
    });
    const vm = app.mount('#root');
</script>
</html>

當(dāng)我們點(diǎn)擊顯示數(shù)字的div時，會執(zhí)行執(zhí)行handleItemClick方法，向父組件傳遞一個add-one事件，并且將目前的count值當(dāng)成參數(shù)傳遞給父組件，父組件通過@add-one="handleAddOne"監(jiān)聽add-one事件，當(dāng)收到這個事件后，就執(zhí)行handleAddOne方法，讓count的值加一，然后由于時count的值和子組件又是綁定的，所以這個值也會同步給子組件，這樣就會在子組件顯示count+1的值。

注意：監(jiān)聽事件，使用“-” 分隔符：如本例中的：@add-one，向外部發(fā)送一個事件時用駝峰命名：如本例中的：this.$emit('addOne',this.count);

從代碼中我們可以看到從子組件向父組件傳遞一個事件使用的是$emit()方法，這個方法可以單獨(dú)傳事件如：this.$emit('addOne'); 也可以帶參數(shù)傳遞：this.$emit('addOne',2);

另外本例中，我們可以看到這樣一段代碼：

   emits:{
            addOne:(count) =>{
                if(count > 3){
                    alert(count);
                    return true;
                }
                return false;
            }
        },

其實(shí)這里是便于讓代碼的閱讀者能通過emmits關(guān)鍵字快速知道本組件會向外傳遞哪些事件，畢竟組件多了后，會有一堆事件，在代碼中一個個看的確比較費(fèi)勁，這個模塊還有一個功能就是校驗(yàn)我們可以在里面判斷父組件傳遞過來的值，然后做些想做的操作

總結(jié)

本文主要介紹父組件和子組件之間的通信，父組件可以通過v-bind的方式將值傳遞給子組件，子組件可以使用props:[]接收，然后子組件可以通過事件$emit()通知父組件，自己想做的事情，父組件通過@事件名稱的方式接收子組件的事件，這里需要注意的是，子組件發(fā)送事件時，使用的是駝峰命名，父組件定義監(jiān)聽時使用的是分隔符的方式命名，如此就完成了父子組件的通信。

到此這篇關(guān)于Vue父子組件之間事件通信示例解析的文章就介紹到這了,更多相關(guān)Vue父子組件事件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: