Каков наилучший способ создания компонентов на основе других, более мелких базовых компонентов? - PullRequest
Новая
       18

Каков наилучший способ создания компонентов на основе других, более мелких базовых компонентов?

0 голосов
/ 05 октября 2018

Что было бы действительно хорошим, аккуратным способом создания больших компонентов на основе меньших базовых компонентов, которые содержат общие для всех функций функции.Как интерфейс в мире ООП.

Я пытаюсь что-то вроде этого, но это кажется хакерским.

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>

Есть ли лучший способ сделать это с помощью миксинов или даже .extend, но разрешить настройку шаблона?Вот ссылка на коды и ящики с кодом, который работает сейчас с использованием этого подхода - https://codesandbox.io/s/4jmw1l7xow

1 Ответ

0 голосов
/ 05 октября 2018

Это смесь всего, но наряду с mixins вы должны использовать слотов - названных и определенных в частности.

С помощью выделенных слотов вы можете получить доступ к дочерним свойствам в пределах диапазона действия и изменить рендеринг в соответствии с вашими требованиями.Это, наряду с именованными слотами, дает вам полную гибкость того, что вы хотите визуализировать.Простым примером будет: 

// 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>

Что вы в основном делаете, это настраиваете шаблон ребенка снаружи, используя данные ребенка.

Надеюсь, что это поможет.Удачи!

...