Vue组件间的通信

zgbgx 发布于2019-08-21 16:42 / 3397人阅读

摘要：父组件到子组件通信通过属性来传递注册全局组件子组件我是子组件看后面注册子组件的自定义属性，并且绑定到组件内注册全局组件父组件我是父组件通过这个自定义属性将值传入子组件我是父组件传过来的消息子组件

1.父组件到子组件通信

通过props属性来传递

/*------HTML-----*/

    


/*------javascript----- */
//注册全局组件（子组件）
Vue.component("Child",{
    template:"我是子组件,看后面->{{message}}",
    props:["message"],  //注册子组件的props自定义属性，并且绑定到组件内
});
// 注册全局组件（父组件)
Vue.component("Parent",{
    template:`
        我是父组件
          
        //通过message这个props自定义属性将值传入子组件
    `,
    data:function(){
        return {
            ParentMessage:"我是父组件传过来的消息"
        }
    },
});
var app = new Vue({
    el:"#app",
});

2.子组件到父组件通信

通过Vue.$emit()方法

/*------HTML-----*/

    

/*------javascript----- */
// 注册全局组件（子）
Vue.component("Child1",{
    template:"我是子组件，点击我父组件的字会变色",
    methods:{
        call:function(){
            this.$emit("change","#f00");  
            //通过$emit()将事件触发接口暴露出去,参数二是要传递出去的参数
        }
    },
})

// 注册全局组件（父）
Vue.component("Parent1",{
    template:`
        我是父组件
         
    `,
    //通过监听change事件来触父组件中的changeColor事件，从而实现子到父的通信
    data:function(){
        return{
            style:{
                color:"#000",
            }
        }
    },
    methods:{
        changeColor:function(red){ //接子组件传过来的参数
            this.style = {
                color:red,
            }
        }
    },
});

//挂载节点
var app1 = new Vue({
    el:"#app1",
});

3.同级组件间的通信

/*------HTML-----*/

    
    
    
    

/*------javascript----- */
Vue.component("Child2",{
    template:"我是兄弟组件2",
    //1.绑定change事件到click事件上
    methods:{
        change:function(){
            this.$emit("change1");
            //2.暴露接口出去，到外部调用
        }
    },
});

Vue.component("Child3",{
    // 6.值传到这里改变了child3的样式，变为红色，实现了兄弟组件间的通信
    template:"我是兄弟组件3",
    props:["change3"],
});

// 挂载节点
var app2 = new Vue({
    el:"#app2",
    data(){
        return{
            change3:"#000",
        }
    },
    methods:{
        change2:function(){
            this.change3 = "#f00"
            // 4.修改挂载节点下的change3的值
        }
    },
})

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

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

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

vue组件通信全面总结

摘要：当一个组件没有声明任何时，这里会包含所有父作用域的绑定和除外，并且可以通过传入内部组件在创建高级别的组件时非常有用。写在前面组件间的通信是是实际开发中非常常用的一环，如何使用对项目整体设计、开发、规范都有很实际的的作用，我在项目开发中对此深有体会，总结下vue组件间通信的几种方式，讨论下各自的使用场景文章对相关场景预览父->子组件间的数据传递子->父组件间的数据传递兄弟...

余学文 2019-08-23 12:16 评论0 收藏0
VUE组件间的数据传递

摘要：是虽说吸取了的的思想，但是它是单向数据流的，也就是说子组件无法直接改变父组件状态。父组件向子组件传递数据该方式的数据传递是遵循单向数据流的规则的，因此使用起来十分的自然。众所周知，Vue 是基于组件来构建 web 应用的。组件将模块和组合发挥到了极致。Vue 是虽说吸取了 AngularJs 的 MVVM的思想，但是它是单向数据流的，也就是说子组件无法直接改变父组件状态。下面总结出常...

Half 2019-08-21 17:43 评论0 收藏0
【Vue项目总结】组件通信处理方案

摘要：组件之间的通信是我们在项目中常常碰到的，而选择合适的通信方式尤为重要，这里总结下作者在实际项目中所运用到的通信方案，如有遗漏，请大家见谅。示例效果如下兄弟组件同级别组件相互间的通信，我们可以使用或着。 Vue组件之间的通信是我们在项目中常常碰到的，而选择合适的通信方式尤为重要，这里总结下作者在实际项目中所运用到的通信方案，如有遗漏，请大家见谅。文章代码具体见DEMO；文章首发于imon...

TerryCai 2019-08-23 17:52 评论0 收藏0
vue中8种组件通信方式, 值得收藏!

摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...

BicycleWarrior 2019-08-26 10:44 评论0 收藏0
vue学习笔记（三）

摘要：直接创建组件使用标签名组件模板，根据组件构造器来创建组件。相应的，实例也被称为父组件。而且不允许子组件直接修改父组件中的数据，强制修改会报错。一、组件（一）什么是组件组件（Component）是 Vue.js最强大的功能之一。组件可以扩展 HTML元素，封装可重用的代码组件是自定义元素（对象）。（二）创建组件的两种方式官方推荐组件标签名是使用-连接的组合词，例如：。 1、使用...

fsmStudy 2019-08-21 17:14 评论0 收藏0