provide多级组件传值

一、认识

常用于多层嵌套的组件的传值，provide/inject(提供/注入)。

二、用法

1.引入
import {provide,inject} from “vue”
我们即可用使用reactive或ref传递，也可以直接传递值或对象。其实传各种类型的数据都差不多。
1.传值

父组件：provide("scale", scale)  孙组件：let propScale = inject("scale")

2.传递一个对象
父组件：

const info={name:"dmc,age:20}
provide("info",info)

孙组件：

let info= inject("info")

3.传递一个数组
父组件：

provide(
  "deviceList",
  computed(() => {
    return deviceList.value;
  })
);

孙组件：

const deviceList: Ref<Device[]> = ref(inject("deviceList"));

4.孙组件触发事件改变值。
父组件：

<div>{{info.age}}</div>
const info=reactive({name:"dmc,age:20})
provide("info",info)

孙组件：

<button @click="changeAge">点击修改</button>
const changeAge = () => {
    info.age++
}

5.孙组件不允许修改父组件的值时。

provide("info",readonly(info))

6.孙组件触发事件改变父组件的值
如果我们确实希望改变父组件的数据，此时我们可以在父组件中设置方法，通过provide将该方法传递给子组件，保证数据是数据提供的位置进行修改。
父组件：

const changeAge = () => {
    info.age++
}
provide("changeAge",changeAge);

孙组件：

const changeAge= inject("changeAge")

三、经典案例

当父组件的某个值发生改变的时候，子组件的值也要跟着变。
我这里事画布的缩放比例默认值为0.3，点击加事件加0.1，画布大小变了，那画布上面的图形也要对应比例变化。

父组件：

const scale = ref(0.3);
provide("scale", scale);
//画布缩放
function handleCanvasZoom(type) {
  let w = Number(width.value.slice(0, -2));
  let h = Number(height.value.slice(0, -2));
  if (type === "add") {
    width.value = w + w * 0.05 + "px";
    height.value = h + h * 0.05 + "px";
    scale.value = scale.value + 0.05;
  } else {
    width.value = w - w * 0.05 + "px";
    height.value = h - h * 0.05 + "px";
    scale.value = scale.value - 0.05;
  }
}

孙组件：

const data= reactive({
    propScale: 0.3
})
const { propScale } = toRefs(data);
data.propScale = inject("scale");
watch(propScale, (newVal) => {
  let total = Number(((50 * 10) / 3).toFixed());
  data.shapeConfig.radiusX = total * newVal;
  data.shapeConfig.radiusY = total * newVal;
});

四、总结

此方法比较大型的项目中常用，我上面有总结不到位的请各位留言指教！