非父子组件的数据传递
复制代码可以直接查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
//定义两个组件
<foo></foo>
<bar></bar>
</div>
<script type="text/javascript">
var bus = new Vue()
var foo = {
render: function(creatElement){
return creatElement(
"button",{
on:{
click:this.addBar
}
//设置默认值为count
},this.count
)
},
//这里data必须为函数就不多说了
data: function(){
return {
count: 0,
}
},
methods: {
addBar: function(){
//执行incrementBar事件，注意是事件，不是方法，因为Vue中可以自定义事件
bus.$emit("incrementBar")
}
},
mounted: function(){
//在钩子函数中注册事件，注意这里一定要使用var _this=this。因为这里的this是实例化的对象，而里面的this是注册事件中的上下文
var _this = this
bus.$on("incrementFoo",function(id){
_this.count++
})
}
}
var bar = {
render: function(creatElement){
return creatElement(
"button",{
on:{
click: this.addFoo
}
},this.count
)
},
data: function(){
return {
count: 0
}
},
methods: {
addFoo: function(){
bus.$emit("incrementFoo")
}
},
mounted: function(){
var _this = this
bus.$on("incrementBar",function(){
_this.count++
})
}
}
var app = new Vue({
el: "#app",
data: {
count: 0,
},
methods: {
},
components: {
"foo": foo,
"bar":bar
}
})
</script>
</body>
</html>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： Nginx并发访问优化
- 下一篇： Nginx：承受3万并发连接数，胜过Apache 10倍
