小白学 VUE 系列兄弟组件之间的传值

本文目录

在实际开发中也会出现兄弟组件(非父子组件 ) 之间传值的需求,实现的方式很简单,声明一个bus变量其值为newVuel(),然后在A组件bus.$emit() 方法传值,B组件用bus.$on方法接收A组件传过来的值,来完成兄弟组件之间的传值.

实例

<script src="js/vue.js"></script>
<div id="app">
    <a-component></a-component>
    <b-component></b-component>
</div>
<script>
    let bus=new Vue();
    let AComponent={
        template:`<div>
            <button @click="toB">传递给 B </button>

        </div>`,
        methods:{
            toB(){
                bus.$emit("toB","这个是A传递给B的")
            }
        }
    }
    let BComponent={
        data(){
            return {
                name:""
            }
        },
        template:`<div>
            <h3>{{ name }}</h3>
        </div>`,
        created(){
            bus.$on("toB",(val)=>{
                this.name=val;
            })
        },
        methods:{

        }
    }
    new Vue({
        el:"#app",
        data(){
            return {

            };
        },
        components:{
            AComponent,
            BComponent
        },
        methods:{

        }
    })
</script>

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。
黑白课堂

黑白课堂 · 技术专家

专业PHP开发

年度VIP 站长创业者玉树凌风每天醒来0收入
查看更多

最新视频课程

钻级赞助商