vue3 provide的值在回调函数中改变，inject 如何获取到最新的值？

蓓蕾心晴

发布于 2024-11-21 11:32:45

9200

代码可运行

文章被收录于专栏：前端小叙前端小叙

运行总次数：0

代码可运行

需求：

父组件，通过 provide 传递了视频方向的响应式值，该值会有一个初始化的默认值，并在获取视频方向的回调函数中，来动态改变

子组件，需要获取到父组件传递的视频方向，来执行一些逻辑。

这里我们在子组件中通过父组件传递响应式的变量，子组件接受后，通过 watch 监听该变量的改变，来动态执行逻辑。

代码如下：

// 父组件
import { ref, provide } from 'vue';

export default {
  setup() {
    const vDirection = ref(1);

    const getVideoDirection = (direction) => {
      vDirection.value = direction;
    };

    // Provide the reactive reference
    provide('vDirection', vDirection);

    return { getVideoDirection };
  },
};

// 子组件
import { inject, watch, onMounted } from 'vue';

export default {
  setup() {
    const vDirection = inject('vDirection');

    watch(vDirection, () => {
      initShowBar()
    })

    onMounted(() => {
      initShowBar()
    })
  },
};

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-11-11，如有侵权请联系 cloudcommunity@tencent.com 删除