隔了很长一段时间才更新。
因为这段时间换了个地方搬砖，事情比较多，需要熟悉公司的各个项目涉及到的业务和代码，所以才没更新。
从今天开始准备慢慢恢复更新，争取一周分享一篇自己学习的心得。新坑主要技术栈是以vue为主，所以分享的内容主要也是以vue为主。随着形势的发展，前端行业对于从业人员来说要求也会越来越高，我们只要不断的充实自己，才能让自己多一份御寒的能力。
闲话少叙，进入正题。
今天主要是要分享一下关于provide/inject的用法：
先看官网关于provide/inject的定义：
简单的使用方式：
// app.vue
<script>
import Child from './Child.vue'
export default {
components: { Child },
provide() {
return {
//简单写法
message: 'hello1',
}
},
methods:{
handleClick() {
this.message2 = 'message2 is change';
console.log(this.message2)
}
}
}
</script>
<template>
<Child />
<button @click="handleClick">点我改变值</button>
</template>
// Child.vue
<script>
import GrandChild from './GrandChild.vue'
export default {
components: {
GrandChild
}
}
</script>
<template>
<GrandChild />
</template>
//GrandChild.vue
<script>
import GrandChild from './GrandChild.vue'
export default {
// inject:['message', 'message2','message3'] 数组形式写法
// 当声明注入的默认值时
// 必须使用对象形式
inject: {
localMessage:{
from:"message", // 如果与原注入属性名相同时，该属性是可选的
default: ""
},
message2:{
from:"message2",
},
message3:{
from:"message3",
default:"message default value" // 默认值写法
}
},
}
</script>
<template>
<p>
Message to grand child: {{ localMessage }}
<br/>
Message to grand child: {{ message2 }}
<br/>
Message to grand child: {{ message3 }}
</p>
</template>
数据响应式的使用方式：
该方式只需要修改一些提供依赖源即可，修改如下：
// app.vue <script> import { computed } from 'vue' import Child from './Child.vue' export default { components: { Child }, data(){ return { message2:"this is message2" } }, provide() { return { // 数据响应式写法 message2: computed(() => this.message2) } }, methods:{ handleClick() { this.message2 = 'message2 is change'; console.log(this.message2) } } } </script> <template> <Child /> <button @click="handleClick">点我改变值</button> </template>
总结：
provide和inject是配套使用的，provide在祖先组件或者应用根组件提供依赖源，该条组件链的组件都可以通过inject注入provide提供的值。可以用在祖先组件和后代组件的通信上面，避免使用props层层传递的麻烦。
当然，平时开发过程遇到祖先组件和后代组件通信的问题，可能更多的是采用vuex来解决。provide/inject使用较多的场景在高阶组件或者插件上面。