1.父傳子
父組件准備一個數據，通過自定義屬性給子組件賦值，進行傳遞
在子組件中通過 props 屬性來接收參數
<body>
<div id="app">
<son passdata="msg"></son>
</div>
</body>
<script>
Vue.component('son', {
template: '<div>父組件的數據為：{{ passdata }}</div>'，
props: ['passdata']
})
new Vue({
el: '#app',
data: {
msg: '父組件數據'
}
})
</script>
2.子傳父
在子組件准備一個數據，通過 this.$emit('自定義事件', '參數'),進行傳遞。this.$emit 相當於要執行子組件的自定義事件，並且傳入參數
在父組件中給子組件注冊好自定義事件，並且實現這個方法，就可以得到參數了。<son @自定義事件="getval">
<body>
<div id="app">
//myevent是子組件中的事件
<son @myevent='getVal'></son>
</div>
</body>
<script>
Vue.component('son', {
//①通過事件觸發passval方法
template: `<div>給父組件傳參<button @click="passval">傳參</button></div>`,
data(){
return {
son: 'son數據'
}
},
methods: {
passval(){
//②執行子組件中的myevent事件，通過$emit進行傳遞（this.son為傳遞的數據）
this.$emit('myevent', this.son)
}
}
})
new Vue({
el: '#app',
methods: {
//③value就是傳遞過來的數據
getVal(value){
console.log(value)
}
}
})
</script>
3.並列組件傳參
創建一個公用的 bus (vue 實例) var vm = new Vue()
在 A 組件傳入數據 vm.$emit('passval', this.name)
在 B 組件接收數據 vm.$on('passval' ,function(value){})
<body>
<div id="app">
<coma></coma>
<comb></comb>
</div>
</body>
<script>
//①創建一個公共實例
var vm = new Vue()
Vue.component('coma', {
//通過事件觸發 myclick方法去傳參
template: `<div><button @click="myclick"></button></div>`，
data() {
return {
name: 'coma'
}
},
methods: {
myclick: function(){
//向公共實例傳入數據
vm.$emit('passval', this.name)
}
}
})
Vue.component('comb', {
template: `<div>comb</div>`,
mounted() {
//接收數據
vm.$on('passval', function(value){
console.log(value)
})
}
})
new Vue({
el: '#app'
})
</script>