Vue组件之间通信的七种方式

时间: 2019-04-13阅读: 249标签: 通信

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。


父子组件之间的通信

1)props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下:  

// 父组件
<template>
    <div>
        <h3>props和$emit</h3>
        <Children v-on:changeMsg="changeMsg" :msg="msg"/>
    </div>
</template>
<script>
import Children from './children';
export default {
    data() {
        return {
            msg: '传递的值'
        }
    },
    components: {
        Children
    },
    methods: {
        changeMsg(val) {
            this.msg = val;
        }
    }
}
</script>

// 子组件
<template>
    <div>
        <h3 @click="notify">{{msg}}</h3>
    </div>
</template>
<script>
export default { 
    data(){
        return {

        }
    }, 
    props: ['msg'],
    methods: {
        notify() {
            this.$emit('changeMsg', '修改后的');
        }
    }
}
</script>


2)vm.$parent和vm.$children

vm.$parent: 父实例,如果当前实例有的话 vm.$children: 获取当前实例的直接直接子组件,需要注意的是$children并不保证顺序,也不是响应式的 具体代码如下: 

// 父组件的代码
<template>
    <div>
        <h3>{{title}}</h3>
        <button @click="amend">在父组件中修改子组件的标题</button>
        <Children />
    </div>
</template>
<script>
import Children from './children.vue';
export default {
    data() {
        return {
            title: '父组件'
        }
    },
    components: {
        Children
    },
    methods: {
        amend() {
            this.$children[0].title = '修改后的子组件标题';
        }
    }
}
</script>

// 子组件的代码
<template>
    <div>
        <h3>{{title}}</h3>
        <button @click="amend">在子组件中修改父组件的标题</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            title: '子组件'
        }
    },
    methods: {
        amend() {
            this.$parent.title = '修改后的父组件标题';
        }
    }
}
</script>


3)自定义事件的v-model ,具体代码如下:

// 父组件
<template>
    <div>
        标题:<input type="text" v-model="mymessage"><br />
        <Children v-model="mymessage" />
    </div>
</template>
<script>
import Children from './children.vue';
export default {
    data() {
        return {
            mymessage: '名字',
        }
    },
    components: {
        Children
    }
}
</script>

// 子组件
<template>
    <div>
        <input type="text" :value="mymessage" @input="changeValue"> 
    </div>
</template>
<script>
export default {
    model: {
        prop: 'mymessage',
        event: 'input'
    },
    props: ['mymessage'],
    methods: {
        changeValue(event){
            this.$emit('input', event.target.value);
        }
    }
}
</script>


祖先组件和其子孙组件通信

1)provide/inject provide/inject

允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下文关系成立的时间里始终生效 https://cn.vuejs.org/v2/api/#provide-inject 具体代码如下:  

// 父组件
<template>
    <div>
        <h3>{{title}}</h3>
        <Children />
    </div>
</template>
<script>
import Children from './children.vue';
export default {
    data() {
        return {
            title: '父组件的标题'
        }
    },
    provide() {
        return {
            updateTitle: this.updateTitle
        }
    },
    methods: {
        updateTitle(title) {
            this.title = title;
        }
    },
    components: {
        Children
    }
}
</script>

// 子组件
<template>
    <div>
        <button @click="changeAttr">修改父组件的属性</button>
        <Grandson />
    </div>
</template>
<script>
import Grandson from './grandson.vue';
export default {
    data() {
        return {
            
        }
    },
    inject: ['updateTitle'],
    methods: {
        changeAttr() {
            this.updateTitle('子组件修改标题');
        }
    },
    components: {
        Grandson
    }
}
</script>

// 孙组件
<template>
    <div>
        <button @click="changeAttr">修改祖先组件的属性</button>
    </div>
</template>
<script>
export default {
    inject: ['updateTitle'],
    methods: {
        changeAttr() {
            this.updateTitle('孙组件修改标题');
        }
    }
}
</script>


2)$attrs和$listeners

组件A下面有一个组件B,组件B下面有一个组件C,如果想将组件A的数据和自定义事件传递给组件C,就可以使用$attrs和$listeners。 

vm.$attrs: 当一个组件没有声明任何 prop 时(没有在props声明属性),这里会包含所有父作用域的绑定 ,并且可以通过 v-bind="$attrs" 传入内部组件 
vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

具体代码如下: 

// 父组件
<template>
    <div>
        <Children :msg="msg" v-on:changeMsg="changeMsg"/>
    </div>
</template>
<script>
import Children from './children';
export default {
    data() {
        return {
            msg: '下发数据',
            test: '123'
        }
    },
    components: {
        Children
    },
    methods: {
        changeMsg() {
            this.msg = '修改后的数据';
        }
    }
}
</script>

// 子组件
<template>
    <div>
        <Grandson v-bind="$attrs" v-on="$listeners"/>
    </div>
</template>
<script>
import Grandson from './grandson';
export default {
    components: {
        Grandson
    }
}
</script>

// 孙组件
<template>
    <div>
        <h3>{{$attrs.msg}}</h3>
        <button @click="change">修改数据</button>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        change() {
            this.$emit('changeMsg')
        }
    }
}
</script>


非父子组件之间的通信

通过中央事件总线来进行通信 通过新建一个Vue事件的bus对象,然后通过bus.$emit来触发事件,bus.$on监听触发的事件。使用中央事件总线时,需要在手动清除它,不然它会一直存在,原本只执行一次的操作,将会执行多次。 具体代码如下:  

// 父组件
<template>
    <div>
        <One />
        <Two />
    </div>
</template>
<script>
import One from './one.vue';
import Two from './two.vue';
export default {
    data() {
        return {

        }
    },
    components: {
        One,
        Two
    }
}
</script>

// one组件
<template>
    <div>
        <h3>第一个组件</h3>
        <button @click="add">增加数量</button>
    </div>
</template>
<script>
import {BUS} from './index.js';
export default {
    data() {
        return {

        }
    },
    methods: {
        add() {
            BUS.$emit('add');
        }
    },
    beforeDestory() {
        BUS.$off('add');
    }
}
</script>

// two组件
<template>
    <div>
        <h3>第二个组件</h3>
        <h3>数量: {{num}}</h3>
    </div>
</template>
<script>
import {BUS} from './index.js';
export default {
    data() {
        return {
            num: 1
        }
    },
    mounted() {
        BUS.$on('add', () => {
            this.num += 1;
        })
    },
    beforeDestroy() {
        BUS.$off('add');
    }
}
</script>

// index.js 创建的bus
import Vue from 'vue';
export const BUS = new Vue({
})


通过vuex来进行数据管理,具体内容见vuex官网


Socket是如何通信的?

其实服务器的处理和客户端大同小异,分三个逻辑分支:检索成功,用检索到的Socket来处理接收报文;检索失败,服务器侦听(listen)目的端口,创建全新的Socket服务客户;检索失败,服务器没有侦听目的端口,丢弃处理

基于 ThinkJS 的 WebSocket 通信详解

我们的项目是基于 ThinkJS + Vue 开发的,最近实现了一个多端实时同步数据的功能,所以想写一篇文章来介绍下如何在 ThinkJS 的项目中利用 WebSocket 实现多端的实时通信。ThinkJS 是基于 Koa 2 开发的企业级 Node.js 服务端框架

前端跨页面通信,你知道哪些方法?

在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。

两个浏览器窗口间通信总结

两个浏览器窗口间通信:一个窗口更新localStorage,另一个窗口监听window对象的storage事件来实现通信;所有的WebSocket都监听同一个服务器地址,利用send发送消息,利用onmessage获取消息的变化;借助iframe 或 window.open;HTML5 中的 Web Worker 可以分为两种不同线程类型

vue.js $emit/$on的用法和理解_vue组件之间数据传输通信

每个 Vue 实例都实现了事件接口vm.$emit( event, arg ) 触发当前实例上的事件;vm.$on( event, fn )监听event事件后运行。实例说明:Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信,Vuejs 用$emit与$on来进行跨页面之间的数据传输通信

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全