基于其他较小的基本组件构建组件的最佳方法是什么？

Question

在包含所有功能共有的较小基础组件的基础上构建较大组件的真正好方法是什么。就像OOP世界中的界面一样。

我正在尝试类似的操作，但是感觉有点黑。

ReportItem.vue-基本组件

<template>
  <div class="report-item">
    <div class="report-item__actions">
      <button @click="onEdit" type="button">Edit</button>
      <button @click="onDelete" type="button">Delete</button>
    </div>
    <div class="report-item__content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import '../styles/_report-item.css';
export default {
  name: 'report-item',
  props: {
    data: Object,
    type: String,
  },
  methods: {
    onEdit() {
      console.log("Editing...")
    },
    onDelete() {
      console.log("Deleted");
    }
  }
}
</script>

ReportItemText-具有相同的编辑和删除功能但具有更多内容的较大组件。

<template>
  <report-item class="report-item--title">
    <h4>{{title}}</h4>
  </report-item>
</template>
<script>
import ReportItem from './ReportItem';
export default {
  name: 'report-item-title',
  components: {ReportItem},
  data() {
    return {
      title: 'Report Title'
    }
  }
}
</script>

是否有更好的方法使用mixins甚至.extend来执行此操作，但允许自定义模板？ 这是一个codeandbox链接，指向使用此方法即刻生效的代码-https://codesandbox.io/s/4jmw1l7xow

Answer 1

这是所有内容的混合物，但是您应该与mixins一起使用slots-特别是命名和范围。

通过作用域插槽，您可以访问作用域范围内的子级属性，并根据需要修改渲染。这以及命名的插槽为您提供了想要渲染的全部灵活性。一个简单的例子是：

// child-component
<div>
  <slot :childInternalProperty="objectInData">
    {{ childInternalProperty.name }}
  </slot>
</div>

// main
<child-component> <!-- will render the name -->
</child-component>

<child-component> <!-- will render "Hello!" -->
  Hello!
</child-component>

<child-component> <!-- will render "Hello {the name} !" -->
  <template slot-scope="slotProps"> <!-- template goes into child-component's slot -->
    Hello {{ slotProps.childInternalProperty.name }}!
  </template>
</child-component>

您基本上要做的是使用孩子的数据从外部自定义孩子的模板。

希望有帮助。祝你好运！