组件通信

provide/inject

一对使用
父组件通过provide提供数据
子组件通过inject注入值
非响应式，可通过对象内属性的方式进行修改
解决深层次组件通信

举例：

在app组件下引入son1组件，son1组件引入son2，son2引入son3.这时候我们一般会通过props逐层传递，也可以直接通过provide/inject，直接从app把数据传给传给son3。

代码如下：

App.vue

<template><div><son1></son1><hr>{{text}}<button @click="text='改变后的数据'">改变值</button></div>
</template><script>
import son1 from '../components/son1'
export default {data() {return {text:'测试数据',}},provide(){return {text:this.text}},components:{son1}
}
</script><style lang="scss"></style>

son1.vue

<template><div><son2></son2></div>
</template><script>
import son2 from '../components/son2'
export default {name: "son1",components:{son2}
}
</script><style scoped></style>

son2.vue

<template><div><son3></son3></div>
</template><script>
import son3 from '../components/son3'
export default {name: "son2",components:{son3}
}
</script><style scoped></style>

son3.vue

<template><div>来自App的数据：{{text}}</div>
</template><script>
export default {name: "son3",inject:['text']
}
</script><style scoped></style>

效果图：

但是这种方式传值有个问题，就是从App传递的数据是非响应式的。当我们改变App.vue里面的text这个变量的时候，传递给son3的数据并不会发生变化。

遇到这中问题，可以通过把传递的值变成一个对象的形式进行传递。

App.vue

<template><div><son1></son1><hr>{{text}}<button @click="text='改变后的数据'">改变值</button><br>{{obj.text}}<button @click="obj.text='改变后的响应数据'">改变响应数据的值</button></div>
</template><script>
import son1 from '../components/son1'
export default {data() {return {text:'测试数据',obj:{text:'响应的测试数据',}}},provide(){return {text:this.text,obj:this.obj}},components:{son1}
}
</script><style lang="scss"></style>

son3.vue

<template><div><div>来自App的数据：{{ text }}</div><div>来自App的响应数据：{{ obj.text }}</div></div>
</template><script>
export default {name: "son3",inject: ['text', 'obj']
}
</script><style scoped></style>

效果图：

如果在son2中使用了 provide，变量名一直，则会覆盖。

<template><div><son3></son3></div>
</template><script>
import son3 from '../components/son3'export default {name: "son2",provide() {return {text:'son2中的测试数据'}},components: {son3}
}
</script><style scoped></style>

如图：

总结：

provide/inject成对使用，是为了解决深层次组件通信的，如果需要响应式，可以通过对象内属性的方式。
子组件同名的情况，更近的覆盖。
可作为多个较大的父组件，来向下传播唯一值。

父组件：
provide(){return {text:this.text,obj:this.obj}
},子组件：
inject: ['text', 'obj']

vue组件通信provide/inject相关推荐

export default用法vue_Vue组件通信—provide/inject
前言: 之前在 Vue 中进行组件通信一般都会使用 props,开始使用 provide/inject 是非常偶然的一次尝试. 当时在开发中需要实现祖孙组件,甚至祖祖祖祖孙组件之间的通信,在这种多层级 ...
vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
vue组件通信大总结
文章目录 1. props / $emit 2. sync / update 3. provide / inject 4. $attrs / $listeners 5. $children / $pa ...
vue组件通信（传值）
vue组件通信有以下几种方式可以实现(个人总结) 一.父组件到子组件传值方式: 一般通过在父组件中给子组件绑定属性的方式进行传值,子组件通过props来接收. 实例: //父组件 <templa ...
vue 组件通信的几种方式
前言在vue中, 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
Vue组件通信的五种方式
Vue组件通信的五种方式文章目录 Vue组件通信的五种方式一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...
vue组件通信的几种方式
vue组件通信的几种方式最近用vue开发项目,记录一下vue组件间通信几种方式第一种,父子组件通信一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...

vue组件通信provide/inject

组件通信

provide/inject

vue组件通信provide/inject相关推荐

最新文章

热门文章