Vue.js 父子組件及非父子組件間實現(xiàn)通信

lentrue 發(fā)布于2019-08-22 15:40 / 3275人閱讀

摘要：想使用值的話通過進行處理非父子組件間通信創(chuàng)建事件中心組件觸發(fā)組件接收

1. 父組件與子組件通信

父組件

子組件通過props來接收數(shù)據(jù):
格式1：

props: ["childMsg"]

格式2 :

props: {
    childMsg: Array //指定傳入的類型
}

格式3：

props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //指定默認的值
    }
}

2.子組件與父組件通信

在vue中是不允許子組件直接修改父組件的值，在vue中只允許單向數(shù)據(jù)傳遞

子組件:

父組件:

PS
vue2.3可以使用.sync修飾符進行子組件改變props值(注意這里是改變。想使用props值的話通過computed進行處理)

3.非父子組件間通信

創(chuàng)建事件中心

組件1觸發(fā)：

組件2接收:

云服務(wù)器 GPU云服務(wù)器父子組件通信父子組件父子組件通訊父子組件-動態(tài)渲染

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93649.html

相關(guān)文章

vue中8種組件通信方式, 值得收藏!

摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。之前寫了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評論0 收藏0
聊聊Vue.js組件間通信的幾種姿勢

摘要：子組件向父組件通信方法一使用事件父組件向子組件傳遞事件方法，子組件通過觸發(fā)事件，回調(diào)給父組件。非父子組件兄弟組件之間的數(shù)據(jù)傳遞非父子組件通信，官方推薦使用一個實例作為中央事件總線。寫在前面因為對Vue.js很感興趣，而且平時工作的技術(shù)棧也是Vue.js，這幾個月花了些時間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 評論0 收藏0
vue學(xué)習(xí)筆記（三）

摘要：直接創(chuàng)建組件使用標(biāo)簽名組件模板，根據(jù)組件構(gòu)造器來創(chuàng)建組件。相應(yīng)的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創(chuàng)建組件的兩種方式官方推薦組件標(biāo)簽名是使用-連接的組合詞，例如：。 1、使用...

fsmStudy 2019-08-21 17:14 評論0 收藏0
vue學(xué)習(xí)筆記（三）

摘要：直接創(chuàng)建組件使用標(biāo)簽名組件模板，根據(jù)組件構(gòu)造器來創(chuàng)建組件。相應(yīng)的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創(chuàng)建組件的兩種方式官方推薦組件標(biāo)簽名是使用-連接的組合詞，例如：。 1、使用...

zsirfs 2019-08-01 17:51 評論0 收藏0
vuejs組件通信精髓歸納

摘要：組件的通信和和內(nèi)置的通信手段一般有兩種給元素或組件注冊引用信息訪問父子實例。有時候兩個組件之間需要進行通信，但是它們彼此不是父子組件的關(guān)系。詳情可參考參考組件之間種組件通信方式總結(jié)參考參考組件的分類常規(guī)頁面組件，由 vue-router 產(chǎn)生的每個頁面，它本質(zhì)上也是一個組件（.vue），主要承載當(dāng)前頁面的 HTML 結(jié)構(gòu)，會包含數(shù)據(jù)獲取、數(shù)據(jù)整理、數(shù)據(jù)可視化等常規(guī)業(yè)務(wù)。功能性抽...

妤鋒シ 2019-08-23 15:23 評論0 收藏0