總結：
父元件--》子元件
①通過屬性
步驟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 得到父...