vue父子兄弟之間的元件通訊

2021-09-03 01:42:22 字數 1301 閱讀 1856

一. 父子之間的通訊

1. 父元件-》子元件(props down)

①通過屬性

步驟1:父元件在呼叫子元件時傳值

步驟2:子元件通過props得到父元件的傳過來的資料

vue.component('son',)

②通過$parent

直接在子元件中通過this.$parent得到呼叫子元件的父元件

2、子元件-》父元件(events up)

①events up

步驟1:在父元件中 呼叫子元件的時候 繫結乙個自定義事件 和 對應的處理函式

methods: }, template:' '

步驟2:在子元件中 把要傳送的資料通過觸發自定義事件傳遞給父元件

this.$emit('customevent',123)

$refs

步驟1:在呼叫子元件的時候 可以指定ref屬性

``

步驟2:通過$refs

得到指定引用名稱對應的元件例項

父子間的通訊比較簡單的記憶方法就是props down,events up 如上圖所示

二、兄弟元件間的通訊

步驟1:建立乙個vue的例項 作為事件繫結觸發的公共的物件

var bus = new vue();

步驟2:在接收方的元件 繫結 自定義的事件

bus.$on('customevent',function(msg));

步驟3:在傳送方的元件 觸發 自定義的事件

三、元件間的通訊綜合練習(todolist)

vue元件通訊(父子之間,兄弟之間)

1 在父元件中引入需要通訊的子元件import son from components son 2 在父元件的components中註冊該子元件components 3 在父元件的template中使用子元件4 將需要傳遞給子元件的值通過v bind 此處的price則是傳遞給子元件的值5 在對應的...

vue父子元件之間通訊

1 父元件向子傳遞引數 只需要在子元件內使用props即可獲取。2 子元件返回引數給父元件 子元件中設定 emit func data 父元件中直接取出func即可。注意 父元件向子元件傳參是單向的,若子元件直接修改父元件的引數,vue會報錯。如果需要修改,則有2種方式 方式一 在子元件中複製父變數...

Vue元件 父子元件之間的通訊

最近在學習vue,元件之間的通訊是難點也是重點,所以想稍微總結一下。由於元件的模板無法使用父元件中的資料,所以需要用到props。prop 是你可以在元件上註冊的一些自定義特性。當乙個值傳遞給乙個 prop 特性的時候,它就變成了那個元件例項的乙個屬性。在子元件中註冊了props後,就能將父元件的資...