他的产生是为了多级嵌套子组件引用父组件的值！A中有B,B中有C,A给C数据与方法。
官网的说法

其实和props引用差不多，也可以声明默认值和类型其绑定的不可监听，
如果传入可监听的对象，其属性也可监听！！

简单粗暴，看demo
test1.vue ------ 定义方法method和数据msg，

<template><div class="test1"><son></son> </div>
</template>
<script>
import son from '../components/Son.vue'
export default {name: 'test1',provide(){return{msg: this.helloMsg,method: this.somemethod,}},components: {son,},data(){return {helloMsg: {time: '2019-07',content: '你好'}}},methods: {somemethod(){this.helloMsg.time = '2019-07-10';}}
}
</script>

son.vue ------------ 引用数据，在data中赋值

<template><div class="son">儿子---{{fromtest}}<grandson></grandson></div>
</template>
<script>
import grandson from './Grandson.vue'
export default {inject: ['msg'],components: {grandson,},name: 'son',data(){return {fromtest: this.msg,}}
}
</script>

Grandson.vue ------------ 引用数据和运行方法

   <template><div class="grandson">孙子--{{fromtest}}</div>
</template>
<script>
export default {name: 'grandson',inject: ['msg','method'],data(){return {fromtest: this.msg,}},mounted(){this.method();}
}
</script>

结果：

可以看到方法运行了，数据过去了
最后的话
在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了，因此这个属性通常并不建议使用能用vuex的使用vuex，不能用的多传参几层，但是在做组件库开发时，不对vuex进行依赖，且不知道用户使用环境的情况下可以很好的使用

demo参考简书

补充

参考： vue3.x 的 provide/reject

注意，我补充的都是官网内容，做了一些提炼，想要理解全面推荐官网⇲ 查看
更于 2021年6月28日

provide 一些组件的实例 property 将不起作用

app.component('todo-list', {data() {return {todos: ['Feed a cat', 'Buy tickets']}},provide: {todoLength: this.todos.length // 将会导致错误 `Cannot read property 'length' of undefined`},template: `...`
})

需要将 provide 转换为返回对象的函数

provide() {return {todoLength: this.todos.length}
},

实际上，你可以将依赖注入看作是“long range props”，除了：

父组件不需要知道哪些子组件使用它 provide 的 property
子组件不需要知道 inject 的 property 来自哪里

响应式

如果想要reject得到的值是响应式的，那么可以通过传递一个 ref property 或 reactive 对象给 provide

app.component('todo-list', {// ...provide() {return {todoLength: Vue.computed(() => this.todos.length)}}
})

你想吃彩虹糖吗？我有长颈鹿，可以挤给你！

vue中reject与provide使用相关推荐

vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
vue 中provide的用法_Vue多级组件provide/inject使用详解
这次给大家带来Vue多级组件provide/inject使用详解,Vue多级组件provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下. provide / inject 是 ...
vue 中provide的用法_vue中provide和inject使用
1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读 ...
聊聊 Vue 中 provide/inject 的应用
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
vue 中provide的用法_vue中的provide和inject
阅读element-ui源码,发现在设计子组时件用到了inject属性,随即查了一下官方文档,得知vue在2.2.0版本里新增了provide / inject: provide 和 inject 主 ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
Vue中组件之间8中通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
vue中axios如何实现token验证
title: vue中axios如何实现token验证 date: 2018-02-08 17:50:07 tags: [axios,vue] 继上篇实现Auth认证之后,然后每个跳转页面都会在后端验 ...
Vue中通过Axios向SpringBoot发送get和post请求
场景前端使用Vue+ElementUI实现页面布局. 跨域请求使用axios. 为了将axios的请求对象封装成公共的.新建request.js import axios from 'axios' ...

vue中reject与provide使用

补充

响应式

vue中reject与provide使用相关推荐

最新文章

热门文章