vue3中使用Provide/Inject依赖注入,将替代vue2中在原型链上挂载一些属性
//APP.vue
//在app.vue内注册
import { provide ,ref ,readonly} from "vue";
setup() {
//用ref包裹可使location变为响应式
let location=ref('location')
const updataLocation=()=>{
location.value='变身后的大Location'
}
/*readonly包裹后可以在组件内引用时不被改变值。
否则在组件内可以直接通过location.value=***将值改变,
包裹后只能通过updataLocation()方法改变*/
provide('location',readonly(location))
provide('updataLocation',updataLocation)
}
//组件内使用
import { inject} from "vue";
setup(){
const userLocation = inject('location')
const updataLocation = inject('updataLocation')
return{
userLocation,updataLocation
}
}