基于其他更小的基础组件构建组件的最佳方式是啥？

Posted 2023-02-23

【中文标题】基于其他更小的基础组件构建组件的最佳方式是啥？

【英文标题】：What’s the best way to build components based on other, smaller base components?基于其他更小的基础组件构建组件的最佳方式是什么？

【发布时间】：2019-03-10 14:24:28

【问题描述】：

在包含所有功能的较小基础组件的基础上构建更大组件的真正好方法是什么？就像 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 但允许自定义模板？ 这是一个代码框链接，指向现在使用这种方法工作的代码 - https://codesandbox.io/s/4jmw1l7xow

【问题讨论】：

查看scoped slots 文档。

【参考方案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>

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

希望对您有所帮助。祝你好运！