组件之间通信

最新推荐文章于 2022-11-20 11:18:00 发布

wangsiyisiyi

最新推荐文章于 2022-11-20 11:18:00 发布

阅读量201

点赞数 2

分类专栏： vue 组件通信文章标签： vue

本文链接：https://blog.csdn.net/wangsiyisiyi/article/details/105083553

版权

vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

组件通信

1 篇文章 0 订阅

订阅专栏

利用props实现父组件给子组件传递数据,就是子组件可以使用到父组件的数据

<body>
    <div id="box">
        <father></father>
    </div>
    <template id="father">
        <div>
            <p>这是{{msg}}</p>
            <son :message="msg"></son> //把父组件的数据绑定在子组件身上
        </div>
    </template>
    <template id="son">
        <p>{{message+'lll'}}</p>   //在子组件中使用从父组件上拿到的数据
    </template>
</body>
<script src="../base/vue.js"></script>
<script>
    
    Vue.component('father',{
        template:'#father',//父组件
        data:function(){
            return {
                num:20,
                msg:'王思懿'
            }
        },
        components:{
            son:{//子组件
                template:'#son',
                props:['message'],  //取到从父组件身上取到的数据
            }
        }
    })
    new Vue({
        el:'#box'
    })
</script>

通过$emit实现父子组件通信,让父组件可以使用子组件的数据

<body>
    <div id="box">
        <father></father>
    </div>
</body>

<template id="father">
    <div>
        <p>爸爸在此要说{{newData}}</p>
        <son @change='changeData'></son>  //给子组件绑定父组件的方法
    </div>
</template>

<template id="son">
    <div>
        <p>子组件在此</p>
        <button @click='speak'>说话</button>//给子组件绑定事件
    </div>
</template>
<script src="../base/vue.js"></script>
<script>
//创建父组件
Vue.component('father',{
    template:'#father',
    data:function(){
        return {
            newData:''
        }
    },
    methods:{
        changeData(data){
            this.newData=data
        }
    }
})
//创建子组件
Vue.component('son',{
    template:'#son',
    data:function(){
        return {
            data:'王思懿啦啦啦'
        }
    },
    methods:{
        speak:function(){
            this.$emit('change',this.data)   //调用这个方法,就是找到子组件绑定那个change方法,也就是创建在父组件身上的changeData方法,第二个参数就是changeData的传参
        }
    }
})
new Vue({
    el:'#box'
})

ref实现兄弟之间的通信

<body>
    <div id="box">
        <bigbrother></bigbrother>
        <littlebrother ref='aaa'></littlebrother>
    </div>
    <template id="bigbrother">
        <div>
            <p>{{myData}}</p>
            <button @click='hit'>哥哥打弟弟</button>
        </div>
    </template>
    <template id="littlebrother">
        <div>
            <p>{{myData}}</p>
        </div>
    </template>
</body>
<script src="../base/vue.js"></script>
<script>
    Vue.component('bigbrother',{
        template:'#bigbrother',
        data:function(){
            return {
                myData:'我是大哥'
            }
        },
        methods:{
            hit(){
                // 弟弟的数据被改变
                this.$parent.$refs.aaa.myData='我是弟弟,被打了,呜呜呜'
            }
        }
    })
    Vue.component('littlebrother',{
        template:'#littlebrother',
        data:function(){
            return {
                myData:'我是小弟,我在笑'
            }
        }
    })
    new Vue({
        el:'#box'
    })
</script>

eventbus实现兄弟通信

<body>
    <div id="box">
        <bro></bro>
        <di></di>
    </div>
    <template id="bro">
        <div>
            <p>我是{{name}}</p>
            <button @click='hit'>{{state}}</button>
        </div>
    </template>
    <template id="di">
        <div>
            <p>我是{{diName}}</p>
            <p>我正在{{diState}}</p>
        </div>
    </template>
</body>
<script src="../base/vue.js"></script>
<script>
//创建兄组件
let a=new Vue()
Vue.component('bro',{
    template:'#bro',
    methods:{
        hit(){
            a.$emit('hitdi')
        }
    },
    data(){
        return{
            name:'bro',
            state:'我要打弟弟了'
        }
    }
})
Vue.component('di',{
    template:'#di',
    data(){
        return{
            diName:'wangyanbin',
            diState:'smile'
        }
    },
    methods:{
        changeState(){
            this.diState='cry'
        }
    },
    mounted(){
        a.$on('hitdi',this.changeState)
    }
})
new Vue({
    el:'#box'
})
</script>

wangsiyisiyi

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
组件之间通信

利用props实现父组件给子组件传递数据,就是子组件可以使用到父组件的数据<body> <div id="box"> <father></father> </div> <template id="father"> <div> &l...
复制链接

扫一扫