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

【问题标题】：Pass props to a slot from the Child with Vue使用 Vue 将道具从 Child 传递到插槽
【发布时间】：2021-03-26 06:35:20
【问题描述】：

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

这是我的解决方案：

<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

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

我该如何改进它？

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

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

【问题讨论】：

标签： vue.js

【解决方案1】：

原来你有：

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

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

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

【讨论】：

【解决方案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

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

我发现奇怪而有趣的是，passedExample 属性是插槽对象的一部分，而不是变量本身。

【讨论】：