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

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

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

前言

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

示例解析

在前面的章節(jié)我們使用父組件傳遞過來的值做一個計數(shù)組件的時候，使用v-bind的方式傳值，這個時候父子組件間是單向數(shù)據(jù)流的方式，即子組件無法修改父組件傳來的值，所以做計數(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>父子組件通過事件進行通信</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>

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

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

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

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

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

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

總結

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

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

您可能感興趣的文章: