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 语法的对象：

<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 属性是插槽中对象的一部分，而不是变量本身。

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

2 个答案: