1、 父組件向子組件通信
props -> 如果我們想使父組件的數(shù)據(jù)河闰，則必須先在子組件中定義props屬性
注意：在子組件中定義prop時均抽，使用了camelCase命名法划址。由于HTML特性不區(qū)分大小寫，camelCase的prop用于特性時，需要轉(zhuǎn)為 kebab-case（短橫線隔開）。例如，在prop中定義的myName哭懈，在用作特性時需要轉(zhuǎn)換為my-name。
var Child = {
template:'<div>{{myName}}</div>',
props:{
myName:{type: String }
}
}
var app = new Vue({
el: '#app',
components: {
Child
},
data: {
msg: '我是父組件的msg'
}
})
<div id="app">
// 將父組件數(shù)據(jù)通過已定義好的props屬性傳遞給子組件
<Child :my-name="msg"></Child>
</div>
使用$children可以在父組件中訪問子組件實例
//父組件中
mounted() { console.log(this.$children)}
2茎用、子組件向父組件通信
父組件向子組件傳遞事件方法遣总，子組件通過$emit觸發(fā)事件，回調(diào)給父組件轨功。
var Child = {
template: '<div><button @click="clickEvent"></button></div>',
data() {
return {
childMessage:'我是來自子組件的message'
}
},
methods: {
clickEvent() {
this.$emit('getchildmsg',this.childMessage)
}
}
}
var vm = new Vue({
el:'#app',
components:{ Child },
methods: {
getChildMsgFun(msg) {
console.log('msg:',msg) //我是來自子組件的message
}
}
})
<child v-on:getchildmsg="getChildMsgFun"></child>
方法二：使用$parent可以從一個子組件訪問父組件的實例旭斥。
//子組件中：
mounted() { console.log(this.$parent) }
