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平行组件传值

平行组件传值

最新文章

热门文章
