web-dev-qa-db-fra.com

Comment créer une balise dynamique basée sur des accessoires avec Vue 2

Comment puis-je créer un composant similaire à vue-router router-link où puis-je obtenir la balise via des accessoires pour rendre mon modèle?

<my-component tag="ul">
</my-component>

Rendrait:

<ul>
  anything inside my-component
</ul>
vue.jsvuejs2vue-router
22
cassioscabral

Vous pouvez utiliser un élément component intégré comme ceci:

<component is="ul" class="foo" style="color:red">
  anything inside component
</component>

Voir: https://vuejs.org/v2/guide/components.html#Dynamic-Components

66
krukid

EDIT: Veuillez vérifier la réponse @krukid, c'est une meilleure solution, je ne connaissais pas l'élément component quand j'ai répondu

Façons de la fonction de rendu:

Vous devez créer un "composant wrapper" qui utilise une fonction de rendu.

import Vue from 'vue';

Vue.component('wrapper-component', {
  name: 'wrapper-component',
  render(createElement) {
    return createElement(
      this.tag,   // tag name
      this.$slots.default // array of children
    );
  },

  props: {
    tag: {
      type: String,
      required: true,
    },
  },
});

puis dans tout autre modèle, utilisez simplement comme suit

<wrapper-component tag="div">
  <span>All this will be rendered to inside a div</span>
  <p>
    All 
  </p>
</wrapper-component>

et cela devrait rendre cela

<div>
  <span data-v-4fcf631e="">All this will be rendered to inside a div</span> 
  <p data-v-4fcf631e="">
    All 
  </p>
</div>

Pour en savoir plus sur les fonctions de rendu, veuillez consulter documentation officielle

14
AldoRomo88