您的位置：首页 > Web前端 > Vue.js

Vue学习笔记4.5 非父子组件之间的数据传递（bus机制/订阅者模式/观察者模式）

2019-01-24 14:02 826 查看

看注释有步骤

[code]<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航