vue.js - 如何扩展 Vue 模板组件并注入插槽？

Question

使用 Vue 3 我正在尝试制作一个简单的模板来扩展以前的组件，如下所示......

父.vue

<template>
  <div>
    <!— something will be done with colors here —&gt;
    <slot></slot>
  </div>
</template>
<script>
  import { colors } from "../util.js";

  export default {
    props: {
      color: {
        type: String,
        default: "indigo",
        validator: function (value) {
          return colors.indexOf(value) !== -1;
        },
      },
    },
  };
</script>

孩子.vue

<template>
  <Parent v-bind="this">
    <h1>Some Text</h1>
  </Parent>
</template>
<script>
  import Parent from "./Parent.vue";
  export default {
    components: { Parent },
    extends: { Parent },
    props: {
      id: {
        type: String,
        required: true,
      },
    },
  };
</script>

关键是我应该能够将color道具传递给 Child 并将其转发给它继承的 Parent 实例。然而，我得到...

[Vue 警告]：在渲染期间访问了属性“颜色”，但未在实例上定义。

在 Vue 中处理这种类型的继承的正确方法是什么？

我还想避免添加 indv 属性，例如...

<Parent :label="label" :color="color" :someThing="someThing"></Parent>

标签： vue.jsvue-componentvuejs3