[VUE]:is特性

1.动态切换不同组件

通过is我们可以动态的更换模板中的组件

<div id="app">
    <button @click="changeComponent('component1')">A</button>
    <button @click="changeComponent('component2')">B</button>
     <!-- 通过is特性,可以动态切换当前组件  -->
    <div v-bind:is="currentView"></div>
      <!-- v-bind:动态绑定属性  -->
</div>

//引入组件
import component1 from '../....';
import component2 from '../....';
export default {
 data(){
 return {
    currentView:'component1'
     //当前组件
  } 
 },
 methods:{
     changeComponent(component){
     this.currentView=component;
         //点击按钮,动态切换不同的组件
    }
 }
 components:{
     component1,
     component2
 }
} 

2.解析DOM模板 : 解除限制元素

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
  	<my-component></my-component>
</table>
<!-- 这个自定义组件<my-component>会被作为无效的内容提升到外部，并导致最终渲染结果出错。 -->

<table>
  <tr is="my-component"></tr>
</table>
<!--增加is特性来扩展，从而达到可以在这些受限制的html元素中使用 -->

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

• 字符串 (例如：template: '...')
• 单文件组件(.vue)

<script type="text/x-template"></script>

链接:https://cn.vuejs.org/v2/guide/components.html#动态组件