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对象的值也会变动,变动值和子孙组件一致。

  1. 子孙组件模板
<n-step
          title="第一部分"
          description="这里是描述"
          style="cursor: pointer"
          @click="current = 1"
/>
  1. 父组件模板

子组件中触发@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"
            >

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

Logo

前往低代码交流专区

更多推荐