vue的通信方式有哪些

1.vuex

2.事件总线eventBus

3.父子组件（props）

prop只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流，而且prop只读，不可被修改，所有修改都会失效并警告

//父组件
<xxx :articles="articleList"></xxx>//子组件
<template><div><span v-for="(item, index) in articles" :key="index">{{item}}</span></div>
</template><script>
export default {props: ["articles"]
};
</script>

1）子父组件

子组件emit绑定一个自定义事件，当这个事件被执行时，就会将参数传给父组件，父组件通过v-on监听并接收参数（在上一个例子上，点击页面渲染出来的ariticle的item，父组件中显示在数组中的下标）

//父组件
<p>{{currentIndex}}</p>data() {return {currentIndex: -1,articleList: ["红楼梦", "西游记", "三国演义"]};},methods: {onEmitIndex(idx) {this.currentIndex = idx;}}//子组件
<div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div><script>
export default {props: ["articles"],methods: {emitIndex(index) {this.$emit("onEmitIndex", index);}}
};
</script>

4.作用域插槽

5.inject provider注入

6.动态路由

7.sessionStorage/localStorage

8.ref

vue的通信方式有哪些相关推荐

Vue 组件通信方式居然有这么多？你了解几种
↓推荐关注↓ 前端技术编程专注于分享前端技术:JS,HTML5,CSS3,Vue.js,React,Angular 等前端框架和前端开源项目推荐! 0篇原创内容公众号 vue组件通信的方式,这是在 ...
超实用的 Vue 组件通信方式大汇总（8种）
文章目录前言一.Vue组件关系二.Vue组件通信方式 1. props / $emit 1.1 props 父传子 1.2 $emit 子传父 1.3 父子组件双向绑定 1.3.1 v-mode ...
8种vue组件通信方式
vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好 ...
vue组件通信方式之eventBus
我们在vue项目中最常遇到的问题就是组件之间的通信,父子通信,兄弟通信,跨组件之间的通信. 父子通信,通常父组件向子组件通过props传值,子组件通过使用$emit向父组件传参,还有诸如 $paren ...
【面试常考】Vue组件通信方式
1.常见组件通信场景大致有: (1)父子组件通信 (2)非父子组件通信(兄弟.跨层级) 2.组件间通信方式有: (1)父组件向子组件: 父组件通过props传递数据,包括一般数据.函数 (2)子组件向 ...
Vue 组件通信方式
包括父->子,子->父,以及无关系组件等三种父组件-->子组件通过props属性通信子组件-->父组件通过监听事件$emit的方式通信其他组件通信通过中央事件总线(事件车 ...
vue 修改div宽度_Vue 组件通信方式及其应用场景总结（1.5W字）
前言相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰.今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其 ...
c++中获取蓝图组件_Vue组件通信方式居然有这么多？你了解几种
作者:梨香链接:https://juejin.im/post/6887709516616433677 vue组件通信的方式,这是在面试中一个非常高频的问题,我刚开始找实习便经常遇到这个问题,当时只知 ...
前端Vue和计网面试题总结
VUE和计网总结 Vue面试题总结一.Vue.js的优点二.vue组件通信方式 (1)父子通信: (2)兄弟组件通信: (3)跨级通信: 三.vuex (1)项目中有使用vuex吗? (2)Vue ...