文章目录
1.provide和inject
provide/inject主要适用于在一些深入嵌套的组件中,子组件想要获取父组件的部分内容的情况,此时可以在父组件中使用provide来提供数据,在子组件中使用inject来获取并使用这些数据(我们可以将依赖注入看作是“长距离的 prop”)
1.1基本使用
//父组件
data(){
return{
books:['javascript', 'vue', 'vite']
}
},
provide(){
return{
name:'lili',
age:25,
todoLength: this.books.length
}
}
//子组件
<h2>{{name}}-{{age}}</h2>
<h2>{{todoLength.value}}</h2>
inject:['name', 'age', 'todoLength']
- 打印结果如下:
1.2如何处理响应式数据
但是当我们父组件中的数据需要实时进行更改时,就会发现子组件不会发生相应的变化
//父组件
<button @click="btnClick">按钮</button>
methods:{
btnClick(){
this.books = ['javascript', 'vue']
}
}
- 打印结果如下:
点击按钮,从父组件中传入的todoLength长度仍为3,这是因为在provide中引入的this.books.length本身并不是响应式的,所以我们可以使用一些响应式的API来完成这些功能,比如computed函数。而且在调用的时候,因为computed返回的是一个ref对象,我们要取出value属性来使用。
//父组件
import {computed} from 'vue'
export default {
provide(){
return{
name:'lili',
age:25,
todoLength: computed(() => this.books.length)
}
},
<h2>{{todoLength.value}}</h2>
- 打印结果如下:
2.全局事件总线mitt库
全局事件总线可以用于非父子组件之间的通信,如与兄弟组件或者兄弟组件的子组件进行通信。在Vue3中,我们可以使用第三方库mitt来使用全局事件总线
2.1安装mitt库,封装eventbus.js工具类
npm install mitt
import mitt from 'mitt';
const emitter = mitt();
export default emitter;
2.2在其中一个组件中触发事件
import emitter from './utils/eventbus'
export default {
methods:{
btnClick(){
console.log('about发生点击');
emitter.emit('kobe', {name:'kobe', height:198})
}
}
}
2.2在该组件的兄弟组件或者兄弟组件的子组件中监听该事件
import emitter from './utils/eventbus'
export default {
created(){
emitter.on('kobe', (info)=>{
console.log("best player:", info)
})
}
}
- 打印结果:
未完待续。。。