vue父子組件通信

xcold 發布于2019-08-23 14:16 / 756人閱讀

組件目錄結構

parent
child

API： $emit、 $on、 $refs、 props

1、父子組件通信

需求合理性我們先不考慮，demo就為了搞清怎么通信，我們要求：
1、父組件傳值給子組件，同時父組件input輸入框value也可同步到子組件
2、點擊子組件加減子組件數字跟隨變動，父組件input value跟隨變動，

父組件

子組件

父組件引入子組件

import addChild from "@/components/add"

父子件注冊子組件

//并在父組件內注冊子組件
components:{
    addChild
}

父組件html

// v-bind:count="count" 父組件傳遞值給子組件，v-on:add="add"監聽子組件 (用v-bind和v-on有助于更好的理解，熟悉了我們可以簡化)

子組件接收父組件傳遞的值

props:{
        count:{
            //約定數據類型
            type: Number,
              //默認值
            default: 0
        }
    }

接收父組件傳遞的值count

發送事件

 methods:{
        add(){
            this.$emit("childAdd",this.count + 1)
        },
        reduce(){
            this.$emit("childReduce", this.count - 1)
        }
    }

//父組件監聽子組件指令childAdd、childReduce 并觸發父組件方法add、reduce

以上父組件穿值給子組件，子組件觸發事件給父組件搞定，總結一下，父組件v-bind:count="count"穿值給子組件，子組件props：接收（props接收的父組件的值相當于子組件內定義data只不過不能直接修改疑問可搜索子組件為什么不能直接修改父組件值），繼續，子組件定義方法并執行emit指令定義指令名字“childAdd、childReduce”，當子組件觸發add、reduce方法觸發emit并發指令給父組件，父組件v-on:childAdd（簡寫@childAdd）監聽并觸發父組件方法，如下圖

接下來我們再用$on,監聽指令不在dom內，直接寫在js中上圖

標注忽略了 child組件ref="addChild" 和普通獲取操作dom一樣

我們再看看console this.refs

這樣我們就可以做到和dom內監聽子組件一樣的效果

當然這樣寫感覺惡心了不少，不過我是為了引出父組件直接操作子組件方法做個引子

給父組件加一個功能可以改變子組件顯示值（還是那句話不管合不合理我們只看怎么實現）

同樣還是用ref來獲取子組件，這樣可以直接觸發子組件方法。

ok父子組件通信算是說完了

你的點贊是我的動力謝謝

云服務器 GPU云服務器 vue父子組件通訊父子組件通信父子組件父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100366.html

Vue 組件間通信方式

摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質還是單向數據流。跟一樣，組件間最基本的數據流是通過向子組件傳遞數據。但是在卻很少使用，因為組件可以自定義事件，即后面的組件間通信方式其實就是訂閱發布模式。例子是在 jsrun.net 平臺編寫，不支持移動端平臺，所以本文建議在 PC 端進行閱讀。 Vue 是數據驅動的視圖框架，那么組件間的數據通信是必然的事情，那么組件間如何進行數...

hss01248 2019-08-26 13:54 評論0 收藏0
Vue2.0父子組件間事件派發機制

摘要：從過來的都知道，在中，父子組件間事件通信的和被移除了。通過廣播和事件分發的機制，就顯得比較混亂了。在父組件中中然后，在子組件中，主要在任意事件回調中使用來觸發自定義的事件，后面還可以加上參數傳給父組件。從vue1.x過來的都知道，在vue2.0中，父子組件間事件通信的$dispatch和$broadcase被移除了。官方考慮是基于組件樹結構的事件流方式實在是讓人難以理解，并且在組件結...

xietao3 2019-08-21 18:40 評論0 收藏0
vue中8種組件通信方式, 值得收藏!

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

BicycleWarrior 2019-08-26 10:44 評論0 收藏0
Vue.js 父子組件及非父子組件間實現通信

摘要：想使用值的話通過進行處理非父子組件間通信創建事件中心組件觸發組件接收 1. 父組件與子組件通信父組件showImg(https://segmentfault.com/img/remote/1460000013945460); 子組件通過props來接收數據: 格式1： props: [childMsg] 格式2 : props: { childMsg: Array //指定...

lentrue 2019-08-22 15:40 評論0 收藏0
vue父子組件間通信

摘要：為此可以使用為子組件指定一個索引。訪問子組件當和一起使用時，是一個數組或對象，包含相應的子組件。父子通信目前有四種方式： 1.父組件傳遞數據給子組件父組件數據如何傳遞給子組件呢？可以通過props屬性來實現父組件： //這里必須要用 - 代替駝峰data(){ return { msg: [1,2,3] };} 子組件通過props來接收數據:方式1：props: [childMs...

617035918 2019-08-23 11:51 評論0 收藏0