初学Vue四-同级组件之间的数据交互

jiezi

5 年前

1.x 方法：

.sync – 与 think 同音

    <div id="app">
        <h1> 我是父级，我的数据是 =>{{msg1}}</h1>
        <!-- 在这里加入 sync 方法 -->
        <my :mymsg.sync="msg1"></my>
    </div>

    <template id="bill">
        <div>
            <input type="button" value="改变" @click="cg">
            <h1> 我是子级数据 =>{{mymsg}}</h1>
        </div>
    </template>

js 部分：new Vue({
        el:'#app',
        data:{
            msg:'今天天气不错',
            msg1:'父级数据',
        },
        components: {
            'my':{
                methods:{cg:function(){this.mymsg="改变数据";}
                },
                props: ['mymsg'],
                template:'#bill',
            }
        }
    })

2.x 版本：

利用了原生 js 的 对象特性 — 引用
当父级数据是对象形式的时候在作用域中 <my :mymsg="msg1"></my> 传递的就不再是以值的形式传递，
而是用引用传递对象的形式传递，类似于 C 语言的指针 / 别名，所以，用这种形式的时候当改变子级数据时父级数据也会改变
this.mymsg.a='改变数据'

html 部分：<div id="app">
    <h1> 我是父级，我的数据是 =>{{msg1.a}}</h1>
    <!-- 在这里加入 sync 方法 -->
    <my :mymsg.sync="msg1"></my>
</div>

<template id="bill">
    <div>
        <input type="button" value="改变" @click="cg">
        <h1> 我是子级数据 =>{{mymsg.a}}</h1>
    </div>
</template>

js 部分：new Vue({
    el:'#app',
    data:{
        msg:'今天天气不错',
        msg1:{a:'父级数据',},
    },
    components: {
        'my':{
            methods:{cg:function(){this.mymsg.a="改变数据";}
            },
            props: ['mymsg'],
            template:'#bill',
        }
    }
})

首先需要在 script 中创建一个公共的实例化 Vue 对象

var v = new Vue();

第二，在传出的地方用 v.$emit()，第一个参数为key，第二个参数为value，key 在接收时会用到

vm.$emit('a-msg','这里是 a 组件的数据');

最后，在接收的地方用 $v.on() 接收，第一个参数是传出时的key，第二个参数是一个方法，有形参data，形参是传过来的数据

v.$on('a-msg',(data)=>{console.log(data);});

完整代码：

html 部分：<div id="app">
    <my-aaa></my-aaa>
    <my-bbb></my-bbb>
    <my-ccc></my-ccc>
</div>
<template id="aaa">
    <input type="button" @click="change" value="我是 aaa 的按钮">
</template>

<template id="bbb">
    <input type="button" @click="change" value="我是 bbb 的按钮">
</template>

<template id="ccc">
    <div>
        <p>{{a}}</p>
        <p>{{b}}</p>
    </div>            
</template>
-------------------------------------------------------------------------------
js 部分：var vm = new Vue();

new Vue({
    el:'#app',
    data:{ },
    components:{
        'my-aaa':{
            methods: {change(){
                    // 调用了外部的公共对象, 传入数据
                    vm.$emit('a-msg',this.aMsg);
                }
            },
            data(){
                return {aMsg:'我是 a 的数据',}
            },
            template:'#aaa'
        },
        'my-bbb':{
            methods: {change(){
                    // 调用了外部的公共对象, 传入数据
                    vm.$emit('b-msg',this.bMsg);
                }
            },
            data(){
                return {bMsg:'我是 b 的数据',}
            },
            template:'#bbb'
        },
        'my-ccc':{
            template:'#ccc',
            data(){
                return {
                    a:'暂无 a 的数据',
                    b:'暂无 b 的数据'
                }
            },
            mounted () {// 与 $emit()对应的是 $on()
                vm.$on('a-msg',(data)=>{console.log(data);
                    this.a = data;
                });
                vm.$on('b-msg',(data)=>{console.log(data);
                    this.b = data;
                });
            }
        }
    }
})
</script>

初学Vue四-同级组件之间的数据交互

组件之间的数据交互方式

父子级数据同步：

组件之间的数据交互方式