父子元件通訊:
(1)父元件向子元件通訊prop,子元件向父元件通訊$emit
1).父元件傳遞了message資料給子元件,並且通過v-on繫結了乙個getchilddata事件來監聽子元件的觸發事件;vue.component(
'childcompont',
}, template:`
"text" v-model=
"mymessage" @input=
"passdata(mymessage)"
>
`,//get message from parent compont
props:[
'message'
], methods:}}
) vue.component(
'parent',
}, methods:}}
))
2).子元件通過props得到相關的message資料,最後通過this.$emit觸發了getchilddata事件。
關於級聯元件的通訊處理:(關於級聯元件就是 a 元件 包含b子元件,b元件包含c子元件)
非父子元件的通訊:vue.component(
'c',}}
) vue.component(
'b',
}, template:`
"text" v-model=
"mymessage" @input=
"passdata(mymessage)"
>
<
!-- c元件中能直接觸發getcdata的原因在於 b元件呼叫c元件時 使用 v-on 繫結了$listeners 屬性 -->
<
!-- 通過v-bind 繫結$attrs屬性,c元件可以直接獲取到a元件中傳遞下來的props(除了b元件中props宣告的) -->
"$attrs" v-on=
"$listeners"
>
`,//得到父元件傳遞過來的資料
props:[
'message'
], methods:}}
) vue.component(
'a',
}, methods:,
//執行c子元件觸發的事件
getcdata(val)}}
))
對於非父子元件的通訊,使用**匯流排bus來進行,使用bus.emi
t進行觸
發事件,
使用bu
s.
emit進行觸發事件,使用bus.
emit進行
觸發事件
,使用b
us.on進行事件的監聽。
v-model 父子元件通訊傳值解析:vue.component(
'brother1',
}, template:`
this is brother1 compoent!
"text" v-model=
"mymessage" @input=
"passdata(mymessage)"
>
`,methods:}}
) vue.component(
'brother2',}
`,data()},
mounted())
}}) //**事件匯流排
var bus=new vue();
)
v-model內部實現原理解析:vue.component(
'child',,
data()},
methods:
}, template:`
"text" v-model=
"mymessage" @change=
"changevalue"
>
})vue.component(
'parent',}
"message"
>
`, data()}
}))
$parent 和 $children:
除此之外還有向特定父元件傳值以及向特定子元件傳值的 boradcast和dispatch:vue.component(
'child',,
data()},
methods:
}, template:`
"text" v-model=
"mymessage" @change=
"changevalue"
>
})vue.component(
'parent',
}, data()}
}))
vue1.0中提供了這種方式,但vue2.0中沒有,但很多開源軟體都自己封裝了這種方式,比如min ui、element ui和iview等。
比如如下**,一般都作為乙個mixins去使用, broadcast是向特定的父元件,觸發事件,dispatch是向特定的子元件觸發事件,本質上這種方式還是on和emit的封裝,但在一些基礎元件中卻很實用。
function broadcast(componentname, eventname, params)
else})
;}export default }if
(parent)
}, broadcast(componentname, eventname, params)}}
;
VUE 元件(二)元件通訊
元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時,就要用到自定義事件 子元件用 emit 來觸發事件,父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果,在改變元件data中的count後,通過 emit 將值傳給父元件,父元件用v o...
vue學習筆記(五) 元件通訊
關於vue父子元件通訊 github suerimn 如果元件是乙個單頁面,元件之間存在父子關係,資料傳遞就需要根據父子不同的地位使用不同的辦法。借助新建的electron vue專案自帶的兩個元件來說明。目錄結構如下 其中landingpage.vue是父元件,systeminformation....
Vue 二 元件間通訊
父元件中定義元素 如job 初始化 data 資料 data function 父元件中子元件標籤中定義並繫結資料 如 job job 等號左邊屬性名需和子元件定義 呼叫的寫法一樣,右邊表示父元件中的資料元素 name name job job namewasreset name event res...