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

tinyq 发布于2019-08-26 10:36 / 1626人阅读

摘要：组件之间的数据交互方式父子级数据同步方法与同音我是父级，我的数据是在这里加入方法改变我是子级数据部分今天天气不错父级数据改变数据版本利用了原生的对象特性引用当父级数据是对象形式的时候在作用域中传递的就不再是以值的形式传递，而是

组件之间的数据交互方式 父子级数据同步：

1.x方法：

.sync - 与think同音

    
        我是父级，我的数据是=>{{msg1}}
        
        
    

    

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

2.x版本：

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

html部分：

    我是父级，我的数据是=>{{msg1.a}}
    
    




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部分：


    
    
    






-------------------------------------------------------------------------------
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;
                });
            }
        }
    }
})

GPU云服务器云服务器组件之间通信 vue组件 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106447.html

vue组件初学习（一）---初学者文档

摘要：在有时候，组建也可以是原生的元素。简单的说，就是组件是有结构的有样式的，有交互效果，有行为，信号量可以存数据。组件可以通过属性开设置。一、什么是组件？组件是vue.js最强大的功能之一，它可以扩展HTML元素，封装可以重用的代码. 当然，在更高的层面上，组件是自定义元素，vue.js的编译器为它添加了特殊功能。在有时候，组建也可以是原生的HTML元素。简单的说，就是组件是有结构...

HmyBmny 2019-08-21 17:37 评论0 收藏0
Vue 单文件中的数据传递

摘要：两个同级组件之间传递数据，通过传递数据。准备工作，我新建了个文件，分别是实例根组件，包含和组件的父组件，的同级组件父组件向子组件传递数据，通过传递数据。 Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况：父组件向子组件传递数据，通过 props 传递数据。子组件向父组件传递数据，通过 events 传递数据。两...

darry 2019-08-20 15:16 评论0 收藏0
vue组件学习-数据传递-路由（初学者文档二）

摘要：接上次的验证开始，组件中的作用域都是独立的，子组件的模板不能直接引用父组件的数据，要用特殊方法才能实现数据的传递。，环境的安装第一步新建一个文件夹并初始化第二步安装一级路由这个比较简单，大多应用于单页面应用，不必引入整个路由库。接上次的props验证开始，组件中的作用域都是独立的，子组件的模板不能直接引用父组件的数据，要用特殊方法才能实现数据的传递。一、父子组件之间的通信 ...

Cristic 2019-08-21 17:38 评论0 收藏0
vue组件间通信、数据传递（父子组件，同级组件）

总结一下对vue组件通信的理解和使用。一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue 父组件 app.vue 请输入单价: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 评论0 收藏0