非父子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="vue.js"></script>
<div id="app1">
<component-a></component-a>
<component-b></component-b>
</div>
<script>
var bus = new Vue();
var app1 = new Vue({
el: '#app1',
components: {
'component-a': {
template: `
<p>{{message}}{{changeMsg}}</p>
`,
data() {
return {
message: ''
}
},
computed:{
changeMsg() {
var that = this;
// 监听来自bus实例的事件
bus.$on('on-message',function(msg) {
that.message = msg;
})
}
}
},
'component-b': {
template: `
<button @click="handleEvent">传递事件</button>
`,
methods: {
handleEvent: function() {
// 点击按钮通过bus把事件on-message发出去
bus.$emit('on-message','来自组件component-b的内容')
}
}
}
}
});
</script>
</html>