vue.filename: 와의 차이점vue.filename: 와의 차이점??

vue.filename: 와의 차이점

?

vue에서 동적 컴포넌트를 사용할 경우component또는 html 태그(예:div태그 이름:

<component :is="comp-name"></component>

또는 다음과 같이 입력합니다.

// assume that the root tag of comp-name is div
<div :is="comp-name"></div>

그럼 두 가지 방법의 차이점은 무엇일까요?똑같아요?

"is 속성은 Vue 고유하지 않으며 사용자 지정 요소 사양에서 가져옵니다.

자세한 내용은 HTML "is" 속성이란?을 참조하십시오.

단, 커스텀 요소 사양을 모방하여 Vue가 컴파일을 위해 자체적으로 구현해야 합니다.

이 예에서는, 어느 경우든 태그(tag)는 문제가 되지 않는다고 생각합니다.<component>또는<div>)는 Vue 컴포넌트 인스턴스로 대체됩니다.이것은 일반적인 사용 상황입니다.is가능한 여러 구성 요소("동적 구성 요소") 간에 전환합니다.

그러나 Vue 가이드의 DOM 템플릿 구문 분석 경고 섹션에서 설명한 것처럼 가질 수 있는 하위 요소의 유형을 제한하는 일부 HTML 요소에서 Custom Elements/Vue 구성 요소(런타임 컴파일과 함께)를 사용하려고 하면 문제가 생기기 시작합니다.

다음과 같은 HTML 요소<ul>,<ol>,<table>그리고.<select>어떤 요소가 그 안에 나타날 수 있는지, 그리고 다음과 같은 몇 가지 요소에 대한 제한이 있다.<li>,<tr>,그리고.<option>다른 특정 요소 내부에만 나타날 수 있습니다.

이 경우,isAtribute는 동적 컴포넌트 간 전환에 사용되는 것이 아니라 HTML 제한(브라우저가 커스텀 컴포넌트에 예기치 않게 동작하지 않도록 하기 위해)을 준수하고 나중에 커스텀 컴포넌트로 대체할 수 있습니다.

여기 간단한 데모가 있습니다.<table>:

Vue.component('my-row', {
  template: '#my-row',
});

new Vue({
  el: '#app',
});

td,
th {
  border: 1px solid black;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <table id="table1">
    <tr>
      <th>Table</th>
      <td>1</td>
    </tr>
    <!-- Below Custom component will be stripped out of the table. Exact result may differ depending on browsers -->
    <my-row></my-row>
  </table>

  <hr />

  <table id="table2">
    <tr>
      <th>Table</th>
      <td>2</td>
    </tr>
    <!-- Valid TR row will be correctly replaced by Custom component -->
    <tr is="my-row"></tr>
  </table>
</div>

<template id="my-row">
  <tr>
    <th>Header</th>
    <td>Cell</td>
  </tr>
</template>

결과:

• 파이어폭스에서는<my-row>태그는 외부와 위에 렌더링됩니다.<table>.
• 크롬에서도 마찬가지입니다.

언급URL : https://stackoverflow.com/questions/50619025/vue-js-whats-the-difference-between-component-is-comp-name-and-div-is