Question

方案

我在Vue中有一个自定义按钮组件：

<custom-button type="link">Save</custom-button>

这是它的模板：

// custom-button.vue
<template>
  <a v-if="type === 'link'" :href="href">
    <span class="btn-label"><slot></slot></span>
  </a>
  <button v-else :type="type">
    <span class="btn-label"><slot></slot></span>
  </button>
</template>

您可以从模板中看到它有type道具。如果类型为link，而不是<button>元素，则我使用的是<a>。

问题

您将从模板中注意到我重复了子组件，即两个根组件上的<span class="btn-label"><slot></slot></span>。我如何做到这一点，以便我不必重复子组件？

在JSX中，它非常简单。我只需要将子组件分配给变量：

const label = <span class="btn-label">{text}</span>

return (type === 'link') 
  ? <a href={href}>{label}</a>
  : <button type={type}>{label}</button>

Answer 1

你可以随时创建一个本地注册的组件......

// in custom-button.vue
components : {
    'label' : {template : '<span class="btn-label"><slot></slot></span>'}
}

Answer 2

在这种情况下，我可能会选择直接编写渲染函数，因为模板很小（有或没有JSX），但是如果你想使用模板，那么你可以use the <component> component来动态选择要呈现为该元素的内容，如下所示：

Vue.component('custom-button', {
  template: '#custom-button',
  props: [
    'type',
    'href',
  ],
  computed: {
    props() {
      return this.type === 'link'
        ? { is: 'a', href: this.href }
        : { is: 'button', type: this.type };
    },
  },
});

new Vue({
  el: '#app',
});

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <custom-button type="button">Button</custom-button>
  <custom-button type="submit">Submit</custom-button>
  <custom-button type="link" href="http://www.google.com">Link</custom-button>
</div>

<template id="custom-button">
  <component v-bind="props">
    <span class="btn-label"><slot></slot></span>
  </component>
</template>

使用条件渲染时，如何防止在每种情况下重复子组件？

2 个答案: