Vue3-如何正确使用Provide和Inject

Vue3中的Provide和Inject为祖孙组件传值提供了新思路，和pubusb.js的编码形势相近，供开发者能快速绑定两个组件间的不同值，这篇文章来记录使用过程中踩的坑。

1. 问题简述：在使用provide绑定了祖组件的值后，显式修改其变量值，孙组件没有感知到值的变化，且不触发watch回调。

踩坑记录情况父组件的注释部分

父组件：

	export default defineComponent({
	  components: {
	    Process,
	  },
	  setup() {
	    var stepProcess = ref(1);
	    /*坑在这里，Provide提供的应该是stepProcess响应式对象，
	    而不是stepProcess.value，例如vscode使用插件后,检测到
	    你定义的ref对象，IDE会自动补充object.value*/
	    provide("CurrentProcessVal", stepProcess);
	    }
	    return {
	      stepProcess,
	    };
	  },
	});

子组件：

import { defineComponent, inject, ref, watch } from "vue";

export default defineComponent({
  setup(props, context) {
    var current = inject("CurrentProcessVal");
    return {
      currentStatus: ref("process"),
      current,
    };
  },
});

如果Provide和Inject绑定成功，在子孙组件里面显示修改Inject对象的值，对应Provide的值也会同步修改。

下述代码，作者在子孙组件渲染模板时添加了click响应回调，将current赋值为1，不仅data里的数据会变动，父组件的Provide对象的值也会变动，变动值和子孙组件一致。

2. 子孙组件模板

<n-step
          title="第一部分"
          description="这里是描述"
          style="cursor: pointer"
          @click="current = 1"
/>

3. 父组件模板

子组件中触发@click赋值语句，父模板绑定的stepProcess对象的value也会一同修改

<n-form-item
              :label="`测试label"
              v-show="
                (idx + 1 < 12 && stepProcess === 1) ||
                (idx + 1 >= 12 && idx + 1 <= 16 && stepProcess === 2) ||
                (idx + 1 >= 17 && stepProcess === 3)
              "
              :span="12"
            >

今天的踩坑日记就到这里，如果没有解决你的问题欢迎留言沟通。