Question

我有一个Card组件，我希望从父级中定义的title代码<Card />属性继承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

您应该可以通过在title组件中定义Card属性来执行此操作：

卡：

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

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

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

1 个答案: