非父子组件的数据传递

末蓝、 2022-06-09 12:40 283阅读 0赞

复制代码可以直接查看效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  7. <style type="text/css"> </style>
  8. </head>
  9. <body>
  10. <div id="app">
  11. //定义两个组件
  12. <foo></foo>
  13. <bar></bar>
  14. </div>
  15. <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>
  16. </body>
  17. </html>

发表评论

表情:
评论列表 (有 0 条评论,283人围观)

还没有评论,来说两句吧...

相关阅读