非父子组件的数据传递

末蓝、 2022-06-09 12:40 282阅读 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 条评论，282人围观）

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

相关阅读