組件傳參的方式：
觀察者模式（子傳父）
通過給子組件中設置方法，並在子組件實例中寫下ref=名字，
子組件中的事件里寫下$emit(‘方法名’,’參數’)
此時父組件可以在mounted生命周期中通過this.$refs[‘名字’].$on(‘方法名’，回調)
<!-- 觀察者模式 -->
<div id="app">
<son ref="son"></son>
父親的msg: {{ msg }}
</div>
<script>
Vue.component('son', {
template: `
<div>
<button @click="$emit('func','我是兒子傳過來的參數')">點擊兒子的按鈕，發送給父親</button>
</div>
`,
methods: {
}
})
new Vue({
el: '#app',
data: {
msg: '我是父親的msg'
},
mounted(){
this.$refs['son'].$on('func', (msg)=>{
console.log(msg)
this.msg = msg
})
}
})
</script>
發布訂閱模式：發布訂閱模式：父傳子，子傳父或者兄弟之間傳參
需要引入
<script src="https://cdn.bootcdn.net/ajax/libs/pubsub-js/1.8.0/pubsub.min.js"></script>
發布消息時：PubSub.publish(‘方法名’，‘傳遞的信息’)
訂閱時：PubSub.subscribe（‘方法名’，（e,msg）=>{}）
發布消息后，訂閱者接受消息時的方法名必須與發布時的訂閱名保持一致即可收到傳過來的數據
<!-- 發布訂閱模式 --> <div id="app"> 我是父親的msg: {{msg}} <button @click="parentsendmsg">父親里面的按鈕</button> <coma></coma> <comb></comb> </div> <script> Vue.component('coma', { template: ` <div> <button @click="sendMsg">點擊coma</button> </div> `, methods: { sendMsg(){ // 發布 PubSub.publish('send', '我是coma傳過來的消息') } } }) Vue.component('comb', { template: ` <div> <p>comb：{{ msg }}</p> <p>comb: {{ title }}</p> </div> `, data() { return { msg: '我是comb里面的msg', title: '我是comb里面的title' } }, mounted(){ // 訂閱 PubSub.subscribe('send', (e, msg)=>{ // console.log(msg) this.msg = msg }) PubSub.subscribe('parendsend', (e,msg)=>{ this.title = msg }) } }) new Vue({ el: '#app', data: { msg: '我是父親的msg' }, methods:{ parentsendmsg(){ PubSub.publishSync('parendsend', '我是父親傳過來的消息') } }, mounted(){ PubSub.subscribe('send' ,(e, msg)=>{ console.log(msg) this.msg = msg }) } }) </script>
事件總線傳參：在vue原型上面寫一個事件總線屬性，指向vue的實例化對象
<div id="app">
<coma></coma>
{{ msg }}
</div>
<script>
// 再vue原型上面寫一個事件總線屬性，指向vue的實例化對象
Vue.prototype.$EventBus = new Vue()
Vue.component('coma', {
template: `
<div>
<button @click="sendMsg">coma發送</button>
</div>
`,
methods: {
sendMsg(){
// 事件總線
this.$EventBus.$emit('send', '我是coma發送過來的消息')
}
}
})
new Vue({
el: '#app',
data: {
msg: '我是父親的msg'
},
// 頁面渲染出來了
mounted(){
this.$EventBus.$on('send', (msg)=>{ //監聽
console.log(msg)
this.msg = msg
})
}
})
</script>