vue平行组件传值

Posted 2023-01-01 bigox

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于vue平行组件传值的主要内容，如果未能解决你的问题，请参考以下文章

Vue-Cli—04.父子组件传值祖孙组件传值兄弟组件传值

VUE父子组件之间的传值，以及兄弟组件之间的传值