看注释 有步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>非父子组件数据传递</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
</head>
<body>
<div id='app'>
<child content="Dell"></child>
<child content="Lee"></child>
</div>
</body>
<script>
// 1.通过总线机制来传递数据(好像页脚观察者模式)
Vue.prototype.bus = new Vue()
Vue.component('child', {
props: {
content: String
},
// 2.子组件不能直接修改父组件传递过来的数据 所以赋值给自定义的变量规避
data: function() {
return {
selfContent: this.content
}
},
template: '<div @click="handleClick">{{selfContent}}</div>',
methods: {
handleClick: function() {
// 3.通过bus总线的$emit事件触发进行传递
this.bus.$emit('change', this.selfContent)
}
},
// 4.使用生命周期函数mounted钩子来监听'change'事件进行数据的修改
mounted: function() {
// 5.这里要注意 在函数中的this指向的已经不是原来的this 所以需要复制下然后在$on使用
var this_ = this
this.bus.$on('change', function(msg) {
this_.selfContent = msg
})
}
})
var vm = new Vue({
el: '#app'
})
</script>
</html>