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

Question

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

卡片：

<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>

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

Passing props from page layout through parent slot into child component

vue.js

vue-component

nuxt.js