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

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>