vue2 组件通信

来源：互联网发布：淘宝网体验中心在哪里编辑：程序博客网时间：2024/05/16 19:03

子组件传递数据给父组件

<body>   <div id="box">      <parent></parent>   </div>   <template id='p'>      <div>         <h1>父组件~~~~~~{{ a }}</h1>         <child1 :val='a' @change='getVal'></child1>      </div>   </template>   <template id='c1'>      <div>         <h3>child1------{{ b }}~~~~{{ val }}<button @click='fn'>变</button></h3>      </div>   </template></body></html><script type="text/javascript">   var vm = new Vue({      el:'#box',      data: {},      components: {         parent: {            template: '#p',            data: function () {               // body...               return {                  a: '爸爸'               }            },            methods: {               getVal: function (msg) {                  // body...                  // console.log(msg);                  this.a = msg;               }            },            // 逆向传值,vue中不允许,需要我们主动触发            components: {               child1: {                  template: '#c1',                  data: function () {                     // body...                     return {                        b: '儿子'                     }                  },                  props: ['val'],  //希望得到的值                  // 正向传值  vue是允许的                  methods: {                     fn: function () {                        // body...                        // console.log(1);                        // 触发监听  $emit('自定义事件名称',值)                        // 谁触发,谁接受                        this.$emit('change', this.b);                     }                  }               }            }         }      }   });</script>

兄弟组件间通信

<body>   <div id="box">      <child1></child1>      <child2></child2>   </div>   <template id='c1'>      <div>         <h1>child1-->{{ msg }}<button @click='fn'>传值</button></h1>      </div>   </template>   <template id='c2'>      <div>         <h3>child2-->{{ msg2 }}</h3>      </div>   </template></body></html><script type="text/javascript">   /*      同级组件间传值:         需要通过建立中转站(新的vue实例)来传值         同级间传值,需要主动触发         接收监听     实例上的$on方法来接收监听   */   var Hub = new Vue();   // 1) 中转站,其中不需要设置任何参数   var vm = new Vue({      el:'#box',      data: {},      components: {         child1: {            template: '#c1',            data: function () {               return {                  msg: '我是哥哥'               }            },            methods: {               fn: function () {                       // 2) 主动触发监听(中转站触发监听)                  Hub.$emit('change',this.msg);               }            }         },         child2: {            template: '#c2',            data: function () {               // body...               return {                  msg2: '我是弟弟'               }            },            // 创建完成              created(){               // 3) 接收监听   $on('事件名称',function(val){})     val是传递过来的值               Hub.$on('change', function (val) {                  console.log(val);//                this.msg2 = val;               });            }         }      }   });

阅读全文

0 0