vue元件之間通訊總結 點讚

總結：

父元件--》子元件

①通過屬性

步驟1：

步驟2：

vue.component('son',)

②通過$parent

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

子元件--》父元件

①events up

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

methods:

}，template:'

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

this.$emit('customevent',123)

②$refs

reference 引用

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

步驟2：通過$refs得到指定引用名稱對應的元件例項

this.$refs.zhangsan

兄弟元件通訊

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

var bus = new vue();

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

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

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

bus.$emit('customevent',123);

每日一練：

建立2個元件，main-component,son-component

檢視：main-component 顯示乙個按鈕

son-component 顯示乙個p標籤

功能：main-component 定義乙個變數count,初始化為0，將count傳遞給son-component,son-component接收到資料顯示在p標籤中

main-component 在點選按鈕時，實現對count的自增操作，要求son-component能夠實時顯示count對應的資料

son-component在接收到count之後，在count大於10的時候，將main-component的按鈕禁用掉

（參考：clickme）

doctype html
>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>小練習
title
>
<
script 
src="js/vue.js"
>
script
>
head
>
<
body
>
<
div 
id="container"
>
<
p>}
p>
<
main-component
>
main-component
>
div>
<
script
>
/*每日一練：
建立2個元件，main-component,son-component
檢視： main-component 顯示乙個按鈕
son-component 顯示乙個p標籤
功能：    main-component 定義乙個變數count,初始化為0，將count傳遞給son-component,son-component接收到資料顯示在p標籤中
main-component 在點選按鈕時，實現對count的自增操作，要求son-component能夠實時顯示count對應的資料
son-component在接收到count之後，在count大於10的時候，將main-component的按鈕禁用掉
（參考：clickme）
*///
建立父元件
vue.component(
"main-component",
},methods:
},template:`
<
div>
<
button @click="
countadd"v
-bind:disabled="
!isdisabled
">
點我<
/button>
<
son-
component v
-bind:mycount="
count
"><
/son-component>
<
/div>
`        })
//建立子元件
vue.component(
"son-component",}
<
/p>
<
/div>
`,            
//資料更新完成後判斷從父元件拿到的值
updated:
function
()            }
})newvue(
})script
>
body
>
html
>

vue元件之間通訊

個人blog，歡迎關注加收藏 元件之間通訊的幾種方式 1.父向子傳資料 props 2.子向父傳資料 emit 3.兄弟元件傳資料 a.事件匯流排 bus 在父元件的data中bus new vue 建立 事件匯流排 b.傳遞資料 this.roo t.bu s.root.bus.root.b us...

Vue元件之間通訊

vue元件傳值有以下幾種情況 父元件向子元件傳值 子元件向父元件傳值 兄弟元件之間傳值等 一 父元件向子元件傳值 傳值方式 props 動態傳遞值 子元件son 靜態傳值 父元件 子元件 son 1 prop的大小寫 html中的attribute名對大小寫不敏感，所以prop中的駝峰值需要等價於短...

vue元件之間8種元件通訊方式總結

對於vue來說，元件之間的訊息傳遞是非常重要的，下面是我對元件之間訊息傳遞的各種方式的總結，總共有8種方式。父元件向子元件傳遞資料是通過prop傳遞的，子元件傳遞資料給父元件是通過 emit觸發事件來做到的。vue.component child template props message 得到父...