使用 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 的一部分，而不是變量本身。