Vue.js 使用Vue将道具从孩子传递到插槽

我一直在考虑将道具内容传递给孩子的插槽

这是我的解决方案：

{{exampleText}}

Vue.component（'example'{
数据（）{
返回{
示例文本：“这是一个示例”
}
},
模板：`
`
})
新Vue({
el:“#应用程序”
})

它能用，但我觉得不够优雅

我怎样才能改进它

事实上，如果我是真心的，我不明白为什么会这样。我已经测试了上百个选项，直到我成功，但不确定为什么，特别是模板中的{}

如果有人能给我提供更多的信息，那就太好了。

最初您：

<template #example-body="slotProps">
  <p>{{ slotProps.exampleText }}</p>
</template>

{{slotProps.exampleText}

但是我们可以破坏这个对象，它是ES6语法：

<template #example-body="{ exampleText }">
  <p>{{ exampleText }}</p>
</template>

{{exampleText}}

这是我要找的

{{slotProperties.passedExample}}

Vue.component（'example'{
数据（）{
返回{
示例文本：“这是一个示例”
}
},
模板：`
`
})
新Vue({
el:“#应用程序”
})

正如我在上面的评论中提到的，我没有弄清楚的是插槽中绑定元素与HTML中结果之间的关系

我发现奇怪而有趣的是，

passedExample

prop是插槽中对象的一部分，而不是变量本身