vue平行组件传值
- 2019 年 10 月 7 日
- 筆記
平行组件传值
-
通过平行组件传值可以实现任何情境下的传值,包括(父传子,子传父)
-
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <my-alex></my-alex> <hr> <my-mjj></my-mjj> </div> <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> <script> // 借助一个空的VUE对象 实现组件之间通信 let bus = new Vue(); //子组件A let A = { template: ` <div> <h2>这是子组件: my-alex</h2> <p> my-mjj被选中的次数:{{ num }} </p> </div> `, data() { return { num: 0 } }, // 关键点 第二步 监听B组件触发了xuanwo A就加1 mounted() { //在文档准备就绪之后就要开始监听bus是否触发了xuanwo的事件 /* bus.$on("xuanwo",function(val){ // this.num += 1; console.log(val);// 点击B 可以跟着加1了 //关键点 第三步 怎么改A里面的num 的值 console.log(this); //bus对象 不是A }) */ bus.$on("xuanwo",(val)=>{ //把上面的匿名函数改成箭头函数 // this.num += 1; console.log(val); //点击B 可以跟着加1了 //关键点 第三步 怎么改A里面的num 的值 console.log(this); //A组件 this.num = val; }) } }; //子组件B let B = { template: ` <div> <h2>这是子组件: my-mjj</h2> <button v-on:click="add">选我</button> </div> `, data(){ return{ num:0 } }, methods:{ add(){ this.num += 1; // **** 关键点第一步 利用bus 对象抛出一个自定义事件 bus.$emit("xuanwo",this.num) } } }; //实例化根组件 let app = new Vue({ el: "#app", data: { totalNum: 0 }, components: { "my-alex": A, "my-mjj": B, } }) </script> </body> </html>
