Vuejs3将道具传递给插槽

Question

我现在遇到了一个困扰我的问题，这个问题困扰了我几天，但我找不到合理的解决办法。我甚至不确定这是否有可能。

我到底在想什么:我想通过属性将属性传递给子组件。但是，我想在不指定父级范围的情况下这样做，如下所示：

<MyComponent v-slot="foobar">
  <MySub :text="foobar.text" />
  <MySub :text="foobar.text" />
  <MySub :text="foobar.text" />
</MyComponent>

由于这些组件总是一起出现的，所以出于使用原因，我想使代码更简洁。我尝试过的(这并不意味着是工作代码，但只是为了说明我想要实现的)：操场样本

我也尝试过这样的黑客：

this.$slots.default().forEach((x) => {x.props.text = 'newText'})

但这似乎是我所能使用的最糟糕的黑客攻击(如果它仍然有效的话:D )。

希望有人能帮我。游乐场代码：

“正常”工作方式

我想要实现的

Answer 1

似乎是可以用provide/inject解决的问题

博士：https://vuejs.org/guide/components/provide-inject.html

示例：

MyComponent.vue

<script>
  export default {
    data() {
      return {
        greetingMessage: 'hallo Test'
      }
    },
    provide(){
      return {greetingMessage: this.greetingMessage}
    }
  }
</script>

<template v-slot="foobar">
  <div>
    <slot :text="greetingMessage"></slot>
  </div>
</template>

MySub.vue

<script>
  import {inject} from "vue"
  export default {
    inject: ['greetingMessage'],
  }
</script>

<template :text="foobar.text">
  <div>
    {{ greetingMessage }}
  </div>
</template>

这将使在provide中定义的值可以通过inject对任何子级(不管有多深)可用。

然而，并不是provide不包括开箱即用的反应性，因此，如果您期望它是反应性的，只需在计算中包装(使用复合api)即可。

MyComponent.vue

<script>
  import {computed} from "vue"
  export default {
    data() {
      return {
        greetingMessage: 'hallo Test'
      }
    },
    provide(){
      return {greetingMessage: computed(()=>this.greetingMessage)}
    }
  }
</script>

<template v-slot="foobar">
  <div>
    <slot :text="greetingMessage"></slot>
    <button @click="greetingMessage = greetingMessage+'!'">
      change message
    </button>
  </div>
</template>

链接到证监会的工作实例