Vue中怎么實現組件間數據通信

發布時間：2021-07-21 11:20:34 來源：億速云閱讀：160 作者：Leah 欄目：云計算

這期內容當中小編將會給大家帶來有關Vue中怎么實現組件間數據通信，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

        一、父組件 => 子組件
        在上一章的時候，我們有提到過，我們可以使用 prop 選項在組件中定義一些自定義特性，當有值傳遞給 prop 特性時，那個 prop 特性就變成了那個組件實例的一個屬性，此時我們就可以從組件上獲取到接收的值。因此，這里我們就可以在使用子組件時通過 v-bind 指令動態的綁定一個 prop 特性，從而接收到父組件傳遞的值。
        可以看到，在下面的示例代碼中，我們在子組件中通過 v-bind 指令綁定了一個 prop 特性 parenttitle，用來接收父組件 data 選項中的 title 屬性，之后通過 watch 監聽屬性監聽綁定的 parenttitle 屬性，從而同步更新子組件 data 選項中的 content 屬性值。

<body>
    <div id="app">
        <h5>
            請輸入需要傳遞給子組件的值：<input type="text" v-model="title" />
        </h5>

        <hr />

        <child-node v-bind:parenttitle="title"></child-node>
    </div>
</body>

<template id="child">
    <div>
        <h5>
            Vue 實例中的屬性值為：{{content}}
        </h5>
    </div>
</template>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            title: ''
        },
        components: {
            'childNode': {
                template: '#child',
                props: ['parenttitle'],
                data() {
                    return {
                        content: this.parenttitle
                    }
                },
                watch: {
                    parenttitle() {
                        this.content = this.parenttitle
                    }
                },
            }
        }
    })
</script>

二、子組件 => 父組件

        在 Vue 中存在著一個單向的下行綁定，父級組件的數據變更可以影響到子集組件，反過來則不行。在實際開發中可能會遇到當子組件的數據更新后，需要同步更新父組件的情況，那么這時我們應該怎么做呢？
        既然沒辦法直接通過修改 prop 選項中的屬性進行更新父組件，不如讓我們換一個思路思考。我們想要實現的效果，無非是當子組件數據變更時能夠同步引起父組件的變更，那么，我們是不是可以在子組件數據發生變化后，觸發一個事件方法，告訴父組件我數據更新了，父組件只需要監聽這個事件，當捕獲到這個事件運行后，再對父組件的數據進行同步變更不就可以了，整個的示意流程如下。
那么，如何才能實現事件監聽呢？
        嗯，Vue 已經幫我們實現好了解決方案。我們可以使用 v-on 事件監聽器監聽事件，通過 $emit 去觸發當前實例上的事件。當然，這里的事件可以是 Javascript 中的原生 DOM 事件，也可以是我們自定義的事件。
        例如，在下面的代碼中，當我點擊傳遞數據按鈕后，觸發了子組件的 func 方法，在 func 方法中觸發了子組件實例上的 show 事件，并把 input 框中的值作為參數進行傳遞。這時，我們在使用到子組件的地方就可以通過 v-on(@) 指令監聽這個 show 事件，從而獲取到傳遞的參數，并觸發父組件的監聽事件。

<body>
    <div id="app">
        <h5>
            子組件中的屬性值為：{{msg}}
        </h5>

        <hr />

        <child-node @show="showMsg"></child-node>
    </div>
</body>

<template id="child">
    <div>
        <h5>
            請輸入需要傳遞給父組件的值：<input v-model="childMsg" type="text" />
            <button @click="func">傳遞數據</button>
        </h5>
    </div>
</template>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            title: '',
            msg: '',
        },
        methods: {
            showMsg(data) {
                this.msg = data
            }
        },
        components: {
            'childNode': {
                template: '#child',
                data() {
                    return {
                        childMsg: ''
                    }
                }
                methods: {
                    func() {
                        this.$emit('show', this.childMsg)
                    }
                },
            }
        }
    })
</script>

上述就是小編為大家分享的Vue中怎么實現組件間數據通信了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

Vue中怎么實現組件間數據通信

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

Vue中怎么實現組件間數據通信

猜你喜歡

最新資訊

相關推薦

相關標簽