Vue - 兄弟组件传值

作者: ElricTang | 来源:发表于2019-10-17 16:00 被阅读0次

Vue组件之间的传值
Vue.js 父子组件传值 . 兄弟组件传值
Day5 拾遗 emit
组件通信
Uniapp兄弟组件传值
2020-03月前端面试题
vue的父子传值和使用vuex兄弟传值
VUE03
vue组件传值
花里胡哨的vue传值

1. 使用中间Vue实例实现兄弟传值。

创建一个用于转发数据的中间Vue实例bus
在子组件1中使用bus.$emit()发布事件。
在子组件2中使用bus.$on()监听子组件1发布的事件。

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <script src='../node_modules/vue/dist/vue.js'></script>
       <script src='../node_modules/vue-resource/dist/vue-resource.js'></script>
    </head>
    <body>
        <div id='app'>
            <child1></child1>
            <child2></child2>
        </div>
        <script>
            var bus = new Vue({ });
            var child1 = {
                template:'<button @click="send">发送数据给子组件child2</button>',
                methods:{
                    send(){
                        bus.$emit('send-data','hello world from child1');
                    }
                }
            };
            var child2 = {
                template:'<p>{{msg}}</p>',
                data(){
                    return {
                        msg:''
                    }
                },
                created(){
                    bus.$on('send-data',this.get);
                },
                methods:{
                    get(data){
                        this.msg = data;
                        console.log(`接收到来自child1的数据-${data}`);
                    }
                }
            };
            var vm = new Vue({
                el:'#app',
                components:{
                    child1,
                    child2
                }
            })
        </script>
    </body>
</html>

2. 借助父组件转发

子组件1通过this.$emit()发布事件
父组件通过监听事件获取到子组件1的数据
父组件通过props的方式把子组件1的数据转发给子组件2

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <script src='../node_modules/vue/dist/vue.js'></script>
       <script src='../node_modules/vue-resource/dist/vue-resource.js'></script>
    </head>
    <body>
        <div id='app'>
            <child1 @send-data="get"></child1>
            <child2 :message="msg"></child2>
        </div>
        <script>
            var child1 = {
                template:'<button @click="send">发送数据给子组件child2</button>',
                methods:{
                    send(){
                        this.$emit('send-data','hello world from child1');
                    }
                }
            };
            var child2 = {
                template:'<h1>{{message}}</h1>',
                props:{
                    message:String
                }
            };
            var vm = new Vue({
                el:'#app',
                components:{
                    child1,
                    child2
                },
                data:{
                    msg:'',
                },
                methods:{
                    get(data){
                        this.msg = data;
                    }
                }
            })
        </script>
    </body>
</html>