구성 요소의 html 요소 유형 변경

구성 요소의 html 요소 유형 변경

그리드 시스템의 일부인 다음 Vue JS 컴포넌트가 있습니다.

<bl-column type="section" classList="col--4-12 col--6-12--m col--1-1--s">
 ...
</bl-column>`

위의 예시와 같이 섹션 또는 기사를 포함하는 유형 변수를 추가하여 요소의 유형을 동적으로 " " (표준)", " " 또는 "로 설정합니다.

이것은 나의 칼럼이다.Vue 파일:

<template>
  <{type} :class="classList">
    <slot></slot>
  </{type}>
</template>
<script>
  export default {
    name: "Column",
    props: ['classList', 'type'],
    data() {
      return {
        classList: this.classList || '',
        type: this.type || 'div',
      };
    }
  };
</script>

이것은 분명히 동작하지 않고 에러가 발생하지만, 요소 타입을 설정하는 방법을 알 수 있습니다.render() 함수를 사용하지 않고 실행할 수 있는 방법이 있습니까?

동적 구성 요소를 렌더링하는 더 쉬운 방법이 있습니다.문서 https://vuejs.org/v2/guide/components.html#Dynamic-Components

<template>
  <component :is="type" :class="classList">
    <slot></slot>
  </component>
</template>
<script>
  export default {
    name: "Column",
    props: ['classList', 'type'],
    data() {
      return {
        classList: this.classList || '',
        type: this.type || 'div',
      };
    }
  };
</script>

온라인 예: https://jsfiddle.net/fotcpyc4/

<template>
  <component :is="type">
    <slot />
  </component>
</template>
<script>
export default {
  name: 'Heading',
  props: {
    type: {
      type: String,
      default: () => 'h1',
    },
  },
};
</script>

언급URL : https://stackoverflow.com/questions/42228636/change-html-element-type-of-component