概述
provide/inject
:简单的来说就是在父组件中通过provide
来提供变量,然后在子组件中通过inject
来注入变量。
需要注意的是这里不论子组件有多深,只要调用了inject
那么就可以注入provide
中的数据。而不是局限于只能从当前父组件的prop
属性来获取数据。
写法
// 传入对象写法
provide: {
foo: 'bar'
}
// 函数写法
provide () {
return {
foo: 'bar'
}
}
实例
祖孙传参例子:
//Parent:
<template>
<div>
<childOne></childOne>
</div>
</template>
<script>
import childOne from '../components/test/ChildOne'
export default {
name: "Parent",
provide: {
for: "demo"
},
components:{
childOne
}
}
//ChildOne:
<template>
<div>
{{demo}}
<childtwo></childtwo>
</div>
</template>
<script>
import childtwo from './ChildTwo'
export default {
name: "childOne",
inject: ['for'],
data() {
return {
demo: this.for
}
},
components: {
childtwo
}
}
</script>
//ChildTwo:
<template>
<div>
{{demo}}
</div>
</template>
<script>
export default {
name: "",
inject: ['for'],
data() {
return {
demo: this.for
}
}
}
</script>
实现 provide / inject 可监听
// App.vue 组件 (父组件)
export default {
name: 'electron-xdf',
data () {
return {
asideW: '200px',
_path: null
};
},
created () {
this._path = this.$route.path;
},
provide() {
return {
INFO: this // 传递可响应对象
};
},
methods:{
upprovide(){
this.asideW = '500px'; // 修改 属性值得变化,可以传递到 子孙后代的任意组件 同时响应变化
}
}
}
// 子组件
export default {
props: {},
computed: {},
name: 'process-communication',
data () {
return {
count: 0
};
},
inject: ['INFO'],
methods: {
upprovide(){
// 这里修改之后 App.vue 也会响应数据的变化
this.INFO.asideW = '200px';
}
}
};
提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
刷新vue组件
// App.vue 组件 (父组件)
<template>
<div
id="app"
>
<router-view
v-if="isRouterAlive"
/>
</div>
</template>
<script>
export default {
name: 'App',
components: {
MergeTipDialog,
BreakNetTip
},
data () {
return {
isShow: false,
isRouterAlive: true
},
// 父组件中返回要传给下级的数据
provide () {
return {
reload: this.reload
}
},
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方法
inject: ['reload'],
components: {
PopupAssign
},
methods: {
// ...mapActions(['freshList']),
async successHandle () {
this.reload()
}
}
}
</script>
这样就实现了子组件调取reload方法就实现了刷新vue组件的功能,个人认为它实现了组件跨越组件传递数据方法。
参考:
https://www.jb51.net/article/139769.htm
https://blog.csdn.net/qq_15253407/article/details/91490210
https://www.jianshu.com/p/d34a7df4cd6a