非父子组件的数据传递
复制代码可以直接查看效果
<!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>
还没有评论,来说两句吧...