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

Comment puis-je faire un composant semblable à vue-routeur router-link où je reçois l'étiquette au moyen d'accessoires pour rendre mon modèle ?

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

Serait rendu:

<ul>
  anything inside my-component
</ul>
InformationsquelleAutor cassioscabral | 2017-01-19
  1. 56

    Vous pouvez utiliser un haut- component élément comme suit:

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

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

    • Ce sera juste remplacer le composant avec une envergure sans aucune logique initiale de la composante.
    • ce qui est "logique initiale"? OP demandé comment "créer une balise dynamique basée sur les accessoires" et c'est exactement ce que fait. Vous avez peut-être un autre cas?
    • N'oubliez pas que vous pouvez utiliser <component v-bind:is="nameOfPropOrComputedProperty">, et ce faisant, vous pouvez passer de l'emballage du nom de la balise dans le template parent via prop. Source: https://vuejs.org/v2/guide/components.html#Dynamic-Components
    • C'est la meilleure réponse que le "composant" de la composante fait tout accepté de répondre, mais peut également accepter d'autres Vue.js composants/VNodes. Aussi, cela ne nécessite pas de recréer la roue.
    InformationsquelleAutor krukid
  2. 13

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

    Fonction rendu façons:

    Vous avez besoin pour créer un "composant wrapper" qui utilisent une fonction 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 de simplement l'utiliser comme suit

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

    et qui doit rendre à cette

    <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 le rendu de fonctions, veuillez voir la documentation officielle

    • Est-il une solution qui ne nécessite pas l'utilisation de la fonction rendu?
    • voir krukid de réponse.
    InformationsquelleAutor AldoRomo88