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

Posted

技术标签:

【中文标题】基于其他更小的基础组件构建组件的最佳方式是啥?【英文标题】: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>

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

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

【讨论】:

以上是关于基于其他更小的基础组件构建组件的最佳方式是啥?的主要内容,如果未能解决你的问题,请参考以下文章

如何将 vue 单个组件模板部分拆分为更小的子模板

将组件拆分成更小的组件,同时保持 Angular 中父组件的 `ngModel` 和 `ngModelChange` 绑定

安装组件的最佳方式是啥?

使用 Vue js 发布具有多个组件的表单的最佳方式是啥

懒惰地导入 UI 模块/组件的最佳方法是啥

基于组件的软件设计