将页面布局中的道具通过父插槽传递到子组件

Question

我有一个Card 组件，我想在通过<Cards></Cards> 组件的插槽后，从父布局中定义的<Card /> 标记的title 属性继承title 值。

卡片：

<template>
  <div class="card">
    {{ title }}
  </div>
</template>

<script lang="ts">
import Component from 'nuxt-class-component'
import Vue from 'vue'
import { Prop } from 'vue-property-decorator'

@Component
export default class extends Vue {
  @Prop() title: string
}
</script>

卡片：

<template>
  <div class="cards">
    <slot></slot>
  </div>
</template>

页面：

<template>
  <Cards>
    <Card :title="ABC" />
  </Cards>
</template>

我不太确定如何引用 title 属性。这是用 Vue 怎么写的？

Answer 1

您应该可以通过在Card 组件中定义title 属性来做到这一点：

卡片：

<template>
  <div class="card">
    {{ title }}
  </div>
</template>

<script>
export default {
  props: ['title']
}
</script>