VUE.3x

1. 组件之间的关系

2. 父子组件之间的数据共享

2.1 父组件向子组件共享数据

2.2 子组件向父组件共享数据

2.3 父子组件之间数据的双向同步

3. 兄弟组件之间的数据共享

3.1 安装 mitt 依赖包

3.2 创建公共的 EventBus 模块

3.3 在数据接收方自定义事件

3.4 在数据接发送方触发事件

4. 后代关系组件之间的数据共享

4.1 父节点通过 provide 共享数据

4.2 子孙节点通过 inject 接收数据

4.3 父节点对外共享响应式的数据

4.4 子孙节点使用响应式的数据

5. vuex

6. 总结

VUE.2x

1. 组件之间的关系

2. 父子组件之间的数据共享

2.1 父组件向子组件共享数据

2.2 子组件向父组件共享数据

3. 兄弟组件之间的数据共享

EventBus 的使用步骤

总结：

VUE.3x

1. 组件之间的关系

在项目开发中，组件之间的关系分为如下 3 种：

① 父子关系

② 兄弟关系

③ 后代关系

2. 父子组件之间的数据共享

父子组件之间的数据共享又分为：

① 父 -> 子共享数据

② 子 -> 父共享数据

③ 父 <-> 子双向数据同步

2.1 父组件向子组件共享数据

父组件通过v-bind 属性绑定向子组件共享数据。同时，子组件需要使用props 接收数据。示例代码如下：

2.2 子组件向父组件共享数据

子组件通过自定义事件的方式向父组件共享数据。示例代码如下：

2.3 父子组件之间数据的双向同步

父组件在使用子组件期间，可以使用v-model 指令维护组件内外数据的双向同步：

3. 兄弟组件之间的数据共享

兄弟组件之间实现数据共享的方案是EventBus。可以借助于第三方的包 mitt 来创建eventBus 对象，从而实现兄弟组件之间的数据共享。示意图如下：

3.1 安装 mitt 依赖包

在项目中运行如下的命令，安装mitt 依赖包：

3.2 创建公共的 EventBus 模块

在项目中创建公共的eventBus 模块如下：

3.3 在数据接收方自定义事件

在数据接收方，调用bus.on('事件名称', 事件处理函数) 方法注册一个自定义事件。示例代码如下：

3.4 在数据接发送方触发事件

在数据发送方，调用bus.emit('事件名称', 要发送的数据) 方法触发自定义事件。示例代码如下：

4. 后代关系组件之间的数据共享

后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据。此时组件之间的嵌套关系比较复杂，可以使用provide 和 inject 实现后代关系组件之间的数据共享。

4.1 父节点通过 provide 共享数据

父节点的组件可以通过provide 方法，对其子孙组件共享数据：

4.2 子孙节点通过 inject 接收数据

子孙节点可以使用 inject 数组，接收父级节点向下共享的数据。示例代码如下：

4.3 父节点对外共享响应式的数据

父节点使用provide 向下共享数据时，可以结合 computed 函数向下共享响应式的数据。示例代码如下：

4.4 子孙节点使用响应式的数据

如果父级节点共享的是响应式的数据，则子孙节点必须以.value 的形式进行使用。示例代码如下：

5. vuex

vuex 是终极的组件之间的数据共享方案。在企业级的vue 项目开发中，vuex 可以让组件之间的数据共享变得高效、清晰、且易于维护。

6. 总结

父子关系

① 父 -> 子属性绑定

② 子 -> 父事件绑定

③ 父 <-> 子组件上的 v-model

兄弟关系

④ EventBus

后代关系

⑤ provide & inject

全局数据共享

⑥ vuex

VUE.2x

1. 组件之间的关系

在项目开发中，组件之间的最常见的关系分为如下两种：

① 父子关系

② 兄弟关系

2. 父子组件之间的数据共享

父子组件之间的数据共享又分为：

① 父 -> 子共享数据

② 子 -> 父共享数据

2.1 父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性。

子组件中，通过 props 来自定义属性;

父组件中，负责把数据，通过 v-bind: 绑定给子组件;

示例代码如下：

2.2 子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件。

在子组件中调用 this.$emit(参数1，参数2) 来触发自定义事件;

参数1：字符串，表示自定义事件的名称

参数2：值，要发送给父组件的数据

在父组件中，通过 v-on: 来绑定自定义事件，并提供一个事件处理函数。通过事件处理函数的形参，接收到子组件传递过来的数据;

示例代码如下：

3. 兄弟组件之间的数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。

import bus from './eventBus.js’export default {  data() {
return {
msg: 'hello vue.js'
}
},
methods: {  sendMsg() {
bus.$emit('share', this.msg)
}
}
}//兄弟组件 A（数据发送方）

import Vue from 'vue'// 向外共享 Vue 的实例对象
export default new Vue()//eventBus.js

import bus from './eventBus.js'export default {  data() {
return {  msgFromLeft: ''
}
},
created() {  bus.$on('share', val => {
this.msgFromLeft = val
})
}
}//兄弟组件 C（数据接收方）

EventBus 的使用步骤

① 创建eventBus.js 模块，并向外共享一个 Vue 的实例对象（实例一个Vue对象）

② 在数据发送方，调用bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件（触发事件）

③ 在数据接收方，调用bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件（声明事件）

总结：

vue组件之间的数据共享相关推荐

[vue] vue组件之间的通信都有哪些？
[vue] vue组件之间的通信都有哪些? 父子Coms: 1/2/3 ..兄弟Coms: 4/5跨级Coms: 4/5/6/7props$emit/$on( $parents/$children ) ...
uniapp 子组件 props拿不到数据_谈一谈使用 webpack 开发时，Vue 组件之间的数据传递...
•我们在学习Vue的时候,难免会使用各个组件之间传递数据.•先来介绍一下Vue中组件传递的方式,有父组件传递给子组件数据,子组件传递给父组件数据,父组件直接获取子组件中数据,子组件直接获取父组件数据以 ...
vue组件之间互相传值：父传子，子传父
vue组件之间互相传值:父传子,子传父为什么要用到组件间传值? 答:组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面 ...
vue组件之间的传参总结
之前写的Vue 子父组件间的传值_WeiflR10的博客-CSDN博客一.父传子(prop) 第一步:在父组件中定义数据,例:tohome data () {return {tohome:" ...
描述vue组件之间的通信
##描述 vue组件之间的通信详细易懂,转自https://www.cnblogs.com/barryzhang/p/10566515.html
Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些? 在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢? 1.父组件向子组件传值(用props) 子组件 <template>< ...
vue组件之间的传值（兄弟间的传值）
概要:vue组件之间的传值大致有三种:父传子,子传父,还有兄弟之间,今天我们主要来讲兄弟之间的传值.废话不多说,我们直奔主题 vue 组件兄弟间的传值是要通过一个事件总线来实现(可以把事件总线理解为一 ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
vue组件之间的传值的几种方法
vue组件之间传值的几种方法总结一.父传子父传子技术就是把父组件中的数据传给子元素调用,用到的方法是 1.在父组件的子组件标签上绑定一个属性,挂载要传输的变量 ,语法是 :属性名 (冒号加属性名) ...
深入理解Vue 组件之间传值
一.父组件向子组件传递数据在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组 ...

vue组件之间的数据共享

VUE.3x

1. 组件之间的关系

2. 父子组件之间的数据共享

2.1 父组件向子组件共享数据

2.2 子组件向父组件共享数据

2.3 父子组件之间数据的双向同步

3. 兄弟组件之间的数据共享

3.1 安装 mitt 依赖包

3.2 创建公共的 EventBus 模块

3.3 在数据接收方自定义事件

3.4 在数据接发送方触发事件

4. 后代关系组件之间的数据共享

4.1 父节点通过 provide 共享数据

4.2 子孙节点通过 inject 接收数据

4.3 父节点对外共享响应式的数据

4.4 子孙节点使用响应式的数据

5. vuex

6. 总结

VUE.2x

1. 组件之间的关系

2. 父子组件之间的数据共享

2.1 父组件向子组件共享数据

2.2 子组件向父组件共享数据

3. 兄弟组件之间的数据共享

EventBus 的使用步骤

总结：

vue组件之间的数据共享相关推荐

最新文章

热门文章