时间戳

首页 > 解决方案 > 使用 Vue 将道具从 Child 传递到插槽

vue.js - 使用 Vue 将道具从 Child 传递到插槽

问题描述

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

这是我的解决方案：

<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

解决方案

最初你有：

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

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

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

推荐阅读