ue3如何爷组件修改孙组件的值

Question

vue3如何爷组件修改孙组件的值 或则赋值 ？试了 provide inject 还是没用

Answer 1

在Vue3中，您可以使用provide/inject来实现父组件修改孙组件的值或赋值。但是，需要注意以下一些问题：

1. 在父组件中，使用provide提供子组件需要响应的常量或函数集合。例如，在父组件中提供一个可以被子组件修改的计数器变量：“counter”。在数据上，它看起来像这样：

// File: Parent.vue
import { provide, ref } from 'vue';
import Child from '@/components/Child.vue';

export default {
  components: { Child },

  setup() {
    const counter = ref(0);

    provide('counter', counter);

    return { counter };
  }
};

在上面的代码中，我们使用provide将“counter”变量提供给子组件，“counter”是一个ref类型的变量。

1. 在子组件中，使用inject获取父组件提供的变量。您可以使用ref等Vue3响应式API中提供的函数来修改该值（在示例中，我们使用了单击事件来增加计数器的值）。

// File: Child.vue
import { inject, ref } from 'vue';

export default {
  setup() {
    const counter = inject('counter');
    const numClicks = ref(0);

    function handleClick() {
      numClicks.value++;
      counter.value++;
    }

    return { numClicks, handleClick, counter };
  }
};

在上面的代码中，我们使用inject来获取父组件提供的“counter”计数器变量。我们还定义了一个numClicks变量和一个handleClick函数，用于增加计数器的值。注意，当子组件中的值发生更改时，需要使用“counter.value ++”语句对父组件变量进行更新。

因此，简而言之，您需要确保：

• 在提供组件中导出需要提供的变量或函数。
• 在injecting组件中使用inject获取这些变量或函数。
• 在injected组件中更改所提取的变量或调用所提取的函数。

希望这个例子可以帮助您使用Vue3的provide/inject来实现父组件修改孙组件的值或赋值。