vue3 provide的值在回調函數中改變，inject 如何獲取到最新的值？

需求：

父組件，通過 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()
    })
  },
};

posted @ 2024-11-11 15:36 蓓蕾心晴閱讀(321) 評論(0) 收藏舉報

刷新頁面返回頂部

Apple

知道自己要什么，然后努力追求。

vue3 provide的值在回調函數中改變，inject 如何獲取到最新的值？

公告

Apple

知道自己要什么，然后努力追求。

vue3 provide的值 在回調函數中改變，inject 如何獲取到最新的值？

公告

vue3 provide的值在回調函數中改變，inject 如何獲取到最新的值？