vue3 Provide和Inject的使用
## Provide函數(shù)
### 可以通過provide來為子孫提供數(shù)據(jù)
#### provide可以傳入兩個參數(shù):name:提供的屬性名稱,value:提供的屬性值
import {provide} from 'vue'
setup(){
const x="xwl";
provide("name",x);
return {
? ?x
}
}
## Inject函數(shù)
### 在后代組件中可以通過inject 來注入需要的屬性和對應(yīng)的值
#### inject可以傳入兩個參數(shù):要inject 的property 的name,默認值.
import {inject} from 'vue'
setup(){
const y=inject("name","zhangsan");
return {
? ?y
}
## 為數(shù)據(jù)添加響應(yīng)式
### 可以向provide傳入ref或者reactive對象
import {provide} from 'vue'
setup(){
const name=ref("xwl");
provide("name",name);
return {
?name
}
#### 如果我們需要修改可響應(yīng)的數(shù)據(jù),那么最好是在數(shù)據(jù)提供的位置來修改
#### 我們可以將修改方法進行共享,在后代組件中進行調(diào)用
import {provide} from 'vue'
setup(){
? ?const changeName=()=>{
? ? ? ?console.log("changename")
? ?}
? ?provide("changeName",changeName)
? ?return {
? ? ?changename
? ?}
}



標簽: