1、provide/inject有什么用?
常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props
属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便后期维护。
vue
提供了provide
和inject
帮助我们解决多层次嵌套嵌套通信问题。在provide
中指定要传递给子孙组件的数据,子孙组件通过inject
注入祖父组件传递过来的数据。
使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据
2、provide/inject使用方式
provide
:是一个对象 / 返回对象的函数。
里面是属性和属性值。
注意:子孙层的provide
会掩盖祖父层provide
中相同key
的属性值
inject
:一个字符串数组,或者是一个对象。
属性值可以是一个对象,包含from
和default
默认值,from
是在可用的注入内容中搜索用的 key
(字符串或 Symbol
),意思就是祖父多层provide
提供了很多数据,from
属性指定取哪一个key
;
default
指定默认值。
具体用法:
父组件
<template>
<div> </div>
</template> <script>
export default {
components: {
MergeTipDialog,
BreakNetTip
},
data () {
return {
isShow: false,
isRouterAlive: true
}, // 父组件中返回要传给下级的数据 可以使函数,也可以是data中的数据
provide () {
return {
reload: this.reload
isShow:this.isShow
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
子孙
<template>
<popup-assign
:id="id"
@success="successHandle"
>
<div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
<strong>将被分配给</strong>
<a
slot="reference"
class="unite-btn"
>
指派
</a>
</popup-assign>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
//引用vue reload方法 内容 isShow
inject: ['reload','isShow'],
components: {
PopupAssign
},
methods: {
async successHandle () {
this.reload()
}
}
}
</script>
vue3.0用法
父组件
子组件