返回顶部

vue平行组件传值

平行组件传值

  • 通过平行组件传值可以实现任何情境下的传值,包括(父传子,子传父)

  • 代码示例

    <!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>
posted @ 2019-10-07 12:29  高薪程序员  阅读(1095)  评论(0)  编辑  收藏  举报