Vue_子组件间的数据传递

1. 代码解释：

test1 --- 发送数据的子组件
test2 --- 接受数据的子组件
app --- 实例化对象中介（作为同一个调用者连接test1和test2）
vm --- 实例化父组件

• (1) test1 用methods属性 通过 $emit 方法发送数据，调用者是app，定义方法名称为 tosibling
• (2) test2 在created钩子函数中 通过 $on 方法接受数据，调用者是app，设置方法名称同tosibling
• (3) 在vm父组件中定义两个子组件 test1 和 test2

2. 代码演示：

html

<div id="app">
    <test1></test1>
    <test2></test2>
</div>

javascript

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue();
    var test1 = {
        template:"<div @click='tos'>{{msg}}</div>",
        data:function(){
            return {
                msg:"我是组件一的数据"
            }
        },
        methods:{
            tos(){
                app.$emit("tosibling",this.msg);//需要事件触发才生效  //$emit 用于发送数据
            }
        }
    }
    var test2 = {
        template:"<div>{{msg}}</div>",
        data:function(){
            return {
                msg:"我是组件二的数据"
            }
        },
        created(){
            app.$on("tosibling",function(res){//$on 用于接受数据
                console.log("组件二",{res})//点击组件一的事件传数据给组件二
            })
        }
    }
    var vm = new Vue({
        el:"#app",
        components:{
            test1,
            test2
        }
    })
</script>