provide 和 inject高阶使用

Posted zhaofeis

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了provide 和 inject高阶使用相关的知识,希望对你有一定的参考价值。

provide 在祖先里授权导出 inject在后代负责接收

foo可以是本组件的函数方法 或者 变量
foo 也可以是祖先组件自己 祖先组件foo: this 后代组件 foo.$options.data().msg

祖先组件

<script>
export default {
name: ‘App‘,
provide () {
return {
foo: this.zmsg
}
},
data () {
return {
zmsg: ‘父元素‘
}
}
}
</script>

后代组件
<template>
<section>
我是hello1
{{foo.$options.data().zmsg}}
</section>
</template>

<script>
export default {
name: "hello1",
inject: [‘foo‘],
}
</script>


以上是关于provide 和 inject高阶使用的主要内容,如果未能解决你的问题,请参考以下文章

[转]浅谈vue中provide和inject 用法

[转]浅谈vue中provide和inject 用法

vue组件之间通信(provide/inject与$attrs/$listeners) 之四

Vueprovide/inject实现组件通信

vue3中provide和inject的使用

vue provide和inject使用