配置项的模板

Authors

Name
Elone Hoo
Me
@elonehoo

我喜欢使用的一个技巧来简化我的 vue.js 模板是使它们变成配置驱动的。

而不是编写像这样重复自己的模板：

vue

<template>
  <div>
    <MenuItem @click="openContact">
      Open Contact
    </MenuItem>
    <MenuItem @click="createContact">
      Create Contact
    </MenuItem>
    <MenuItem @click="sendEmail">
      Send Email
    </MenuItem>
    <MenuItem @click="resetSystem" danger>
      Reset System
    </MenuItem>
  </div>
</template>

我们可以重构模板，使用配置来驱动它：

vue

<template>
  <div>
    <MenuItem 
     v-for="item in items"
     :key="item.text"
     :danger="item.danger"
     @click="item.action">
      {{ item.text }}
    </MenuItem>
  </div>
</template>