可重用的组件,用于在Vue.js中呈现按钮或路由器链接

Question

我是使用Vue.js的新手,我在创建Button组件时遇到了困难.

如何将此组件编程为条件渲染？换句话说,也许它应该像一个人router-link一样呈现button？像那样:

<Button type="button" @click="alert('hi!')">It's a button.</Button>
// -> Should return as a <button>.

<Button :to="{ name: 'SomeRoute' }">It's a link.</Button>
// -> Should return as a <router-link>.

Answer 1

您可以在里面切换标签render()或只是使用<component>.

根据动态组件的官方规范:

您可以使用相同的挂载点,并使用保留<component>元素在多个组件之间动态切换,并动态绑定到它的is属性.

以下是您案例的示例:

ButtonControl.vue

<template>
  <component :is="type" :to="to">
    {{ value }}
  </component>
</template>

<script>
export default {
  computed: {
    type () {
      if (this.to) {
        return 'router-link'
      }

      return 'button'
    }
  },

  props: {
    to: {
      required: false
    },
    value: {
      type: String
    }
  }
}
</script>

现在您可以轻松地将它用于button:

<button-control value="Something"></button-control>

或者router-link:

<button-control to="/" value="Something"></button-control>

当需要创建可能具有链接或不具有链接的元素(例如按钮或卡片)时,这是一个很好的行为.