web-dev-qa-db-ja.com

Vue 2で小道具に基づいて動的タグを作成する方法

Vue-router router-linkテンプレートをレンダリングするために小道具を介してタグを取得する場所

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

レンダリングします：

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

組み込みのcomponent要素を次のように使用できます。

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

参照： https://vuejs.org/v2/guide/components.html#Dynamic-Components

66
krukid

EDIT：@krukidの答えを確認してください、それはより良い解決策です、私が答えたときにcomponent要素について知りませんでした

関数のウェイをレンダリングする：

レンダリング関数を使用する「ラッパーコンポーネント」を作成する必要があります。

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,
    },
  },
});

次に、他のテンプレートで次のように使用します

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

そしてそれはこれにレンダリングする必要があります

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

レンダリング関数の詳細については、 公式ドキュメント をご覧ください

14
AldoRomo88