问题

我有3个组件：Form、Card 和 Button。

首先，是我的 Button.vue 组件：

<template>
  <div>
    <slot v-bind="{ text }">
      <button>{{ text }}</button>
    </slot>
  </div>
</template>

<script setup>
const props = defineProps({
  text: {
    type: String,
    required: true
  }
});
</script>

这是我的 Card.vue 组件：

<template>
  <Button text="{ text }">
    <template #default="{ text }">
      <button>{{ text }}</button>
    </template>
  </Button>
</template>

<script setup>
import Button from './Button.vue'

const props = defineProps({
  text: {
    type: String,
    required: true
  }
});
</script>

最后，这是我的 Form.vue 组件：

<template>
  <div>
    <Card text="Some text">
      <template #default="{ text }">
      </template>
    </Card>
  </div>
</template>

<script setup>
import Card from './Card.vue'
</script>

我的问题是，我该如何将文本从 Form.vue 传递给 Button.vue 子组件？

<template>
  <div>
    <slot v-bind="{ text }">
      <button>{{ text }}</button>
    </slot>
  </div>
</template>

<script setup>
const props = defineProps({
  text: {
    type: String,
    required: true
  }
});
</script>

<template>
  <Button text="{ text }">
    <template #default="{ text }">
      <button>{{ text }}</button>
    </template>
  </Button>
</template>

<script setup>
import Button from './Button.vue'

const props = defineProps({
  text: {
    type: String,
    required: true
  }
});
</script>

<template>
  <div>
    <Card text="Some text">
      <template #default="{ text }">
      </template>
    </Card>
  </div>
</template>

<script setup>
import Card from './Card.vue'
</script>

答案1

得分: 1

你的代码实际上是正确的。然而，**如果你想要将一个变量传递给组件的HTML属性，**而不是使用text=, 你应该使用:text=。

而且，Card.vue和Button.vue的props都需要一个字符串，而不是一个对象。所以，不要传递对象，而是按照以下方式传递特定的字符串：:text="myVariableWithStringValue"

Card.vue

<template>
  <Button :text="buttonText"> <!-- 这里需要使用":text"而不是"text" -->
    <template #default="{ text }">
      <button>{{ text }}</button>
    </template>
  </Button>
</template>

<script setup>
import Button from './Button.vue'

const props = defineProps({
  // 我将你的prop从'props.text'重命名为'props.buttonText'，这样我们就不会因为将一切都称为'text'而感到困惑
  buttonText: {
    type: String,
    required: true
  }
});
</script>

Form.vue

<template>
  <div>
    <!-- 我将你的prop从'props.text'重命名为'props.buttonText'，这样我们就不会因为将一切都称为'text'而感到困惑 -->
    <!-- 如果你想要从变量中获取文本，可以使用 :buttonText="variableName" -->
    <!-- 现在，只需将 "Some text" 字符串作为 buttonText -->
    <Card buttonText="Some text"></Card>
    <!-- 你不能在<Card>中使用<template>，因为Card.vue的模板中没有定义<slot> -->
  </div>
</template>

<script setup>
import Card from './Card.vue'
</script>

<template>
  <Button :text="buttonText"> <!-- here need use ":text" instead of "text" -->
    <template #default="{ text }">
      <button>{{ text }}</button>
    </template>
  </Button>
</template>

<script setup>
import Button from './Button.vue'

const props = defineProps({
  // I renamed your prop from 'props.text' to 'props.buttonText' so that we don't get confused by calling everything 'text'
  buttonText: {
    type: String,
    required: true
  }
});
</script>

<template>
  <div>
    <!-- I renamed your prop from 'props.text' to 'props.buttonText' so that we don't get confused by calling everything 'text' --> 
    <!-- If you want give text from variable then can use :buttonText="variableName" -->
    <!-- Now, just give to "Some text" string as buttonText -->
    <Card buttonText="Some text"></Card>
    <!-- And you can't use <template> in <Card> because don't have got defined <slot> in Card.vue's template -->
  </div>
</template>

<script setup>
import Card from './Card.vue'
</script>

答案2

得分: 1

[Vue3 SFC 演练场][1]

似乎你在过度使用组件和插槽属性，你可以只使用具名插槽：

App.vue
```html
<template>
  <div>
    <Card>
      <template #title>卡片标题</template>
      一些卡片内容
      <template #button>按钮文字</template>
    </Card>
  </div>
</template>

<script setup>
import Card from './Card.vue'

</script>

Card.vue:

<template>
    <h2><slot name="title"></slot></h2>
    <p>
    <slot></slot>
    </p>
    <Button>
        <slot name="button"></slot>
    </Button>
</template>

<script setup>
import Button from './Button.vue'
</script>

Button.vue:

<template>
    <div>
      <button><slot></slot></button>
    </div>
</template>

<script setup>
</script>

<details>
<summary>英文:</summary>

[Vue3 SFC Playground][1]

Seems you are overusing component and slot props, you could use just named slots:

App.vue

<template>
<div>
<Card>
<template #title>Card title</template>
Some card content
<template #button>Some button text</template>
</Card>
</div>
</template>

<script setup>
import Card from './Card.vue'

</script>

Card.vue:

<template>
<h2><slot name="title"></slot></h2>
<p>
<slot></slot>
</p>
<Button>
<slot name="button"></slot>
</Button>
</template>

<script setup>
import Button from './Button.vue'
</script>

Button.vue:

<template>
<div>
<button><slot></slot></button>
</div>
</template>

<script setup>
</script>

  [1]: https://play.vuejs.org/#eNqNUstqwzAQ/JVFPeRSbOixqIK2n9CrL66jtCrWA2sdCiH/ntXTNvEhvnhXmp2dGXRh784151myV8ZRajf2KEVnAPhRnWNB5Wc/HXNNXYHBEyocpQi3EEvebijC92W1hCEgBmtQGtyh+Z4RrRERmmpA+Y93bLytQnib5G0w1PphUg7BS5wdnSjt7IQQFZ4mq+HQRI7g+BAH2jQh2DP7iKt3w9jEQU1WzP1oURBH+uXTIvYhhWsBRdne+t+XtA1Mr+Vbx2LeHVuWEyBDA20s1uqKqHqZ3FZLGV7ok5WFv4zXqceCT/Aa/ZIwhb92jp5ex0n9NH/eGrLPrje6k9v9

</details>