Vue父子組件之間事件通信怎么實現(xiàn)

發(fā)布時間：2023-03-16 10:53:51 來源：億速云閱讀：75 作者：iii 欄目：開發(fā)技術(shù)

這篇“Vue父子組件之間事件通信怎么實現(xiàn)”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue父子組件之間事件通信怎么實現(xiàn)”文章吧。

示例解析

使用父組件傳遞過來的值做一個計數(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>父子組件通過事件進(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)我們點擊顯示數(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()方法，這個方法可以單獨傳事件如：this.$emit('addOne'); 也可以帶參數(shù)傳遞：this.$emit('addOne',2);

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

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

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

以上就是關(guān)于“Vue父子組件之間事件通信怎么實現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

Vue父子組件之間事件通信怎么實現(xiàn)

示例解析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽