使用 Vue 将道具从 Child 传递到插槽

Question

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

这是我的解决方案：

<div id="app">

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

Vue.component('example', {
  data () {
    return {
      exampleText: "This is a sample"
    }
  },
  
  template: `
    <div>
      <slot name="example-body" v-bind:exampleText="exampleText" />
    </div>`
})

new Vue({
  el: '#app'
})

https://codepen.io/sirlouen/pen/OJWMRba

它有效，但我觉得它不够优雅。

我该如何改进它？

事实上，如果我是真诚的，我不明白为什么会这样。 我一直在测试一百个选项，直到我让它工作，但不知道为什么，特别是模板中的 { }。

如果有人可以为我提供更多信息，那就太好了。

Answer 1

最初你有：

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

但我们可以破坏 ES6 语法的 object：

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

Answer 2

这是我一直在寻找的

<div id="app">

  <example>
    <template #example-body="slotProperties">
      <p>{{ slotProperties.passedExample }}</p>
    </template>
  </example>
  
</div>

Vue.component('example', {
  data () {
    return {
      exampleText: "This is a sample"
    }
  },
  
  template: `
    <div>
      <slot name="example-body" v-bind:passedExample="exampleText" />
    </div>`
})

new Vue({
  el: '#app'
})

https://codepen.io/sirlouen/pen/GRroOBv

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

我发现奇怪而有趣的是， passedExample道具是插槽中 object 的一部分，而不是变量本身。