代码之家 › 专栏 › 技术社区 › Praveen Puglia

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

vue-component components vue.js javascript

Praveen Puglia · 技术社区 · 6 年前

我正试着做这样的事,但感觉有点俗气。

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>

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

有没有更好的方法可以使用mixin甚至.extend来实现这一点,但是允许自定义模板? 下面是一个codesandbox链接,它指向现在使用这种方法工作的代码- https://codesandbox.io/s/4jmw1l7xow

1 回复 | 直到 6 年前

Andrey Popov 6 年前

它是所有事物的混合体,但是伴随着 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>

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

希望有帮助。祝你好运!

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前