component加:is实现动态组件的渲染

<component>内置组件

在vue-router4过度动画无效解决方案一文中，我们使用了一个<component>的VUE内置组件。

component说明

<component> 元素是vue 里面的一个内置组件。在<component>里面使用 v-bind: is，可以实现动态组件的效果。

用法：渲染一个“元组件”为动态组件。依is的值，来决定哪个组件被渲染。is的值是一个字符串，它既可以是 HTML 标签名称也可以是组件名称。见官方说明 

<!--  动态组件由 vm 实例的 `componentId` property 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件-->
<component :is="$options.components.child"></component>

<!-- 可以通过字符串引用组件 -->
<component :is="condition ? 'FooComponent' : 'BarComponent'"></component>

<!-- 可以用来渲染原生 HTML 元素 -->
<component :is="href ? 'a' : 'span'"></component>

is的说明

主要作用就是配合component做动态组件：官方说明

应用例子（Vue2语法）

<component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

<div id="app">
      <component :is="who"></component>
      <button @click="changeComponent">changeComponent</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var componentA={
         template:`<div>I'm componentA</div>`
    };
     var componentB={
          template:`<div>I'm componentB</div>`
    };
    var componentC={
        template:`<div>I'm componentC</div>`
    };
    new Vue({
      el:'#app',
      data:{
        who: 'componentA'
      },
      components:{
        componentA,
        componentB,
        componentC
      },
      methods:{
            changeComponent:function(){
                if(this.who == 'componentA'){
                    this.who = 'componentB';
                }else if(this.who == 'componentB'){
                    this.who = 'componentC';
                }else{
                    this.who = 'componentA';
                }
            }
        }
    });
</script>

主要就是先引入组件，再通过绑定字符串变量，动态的绑定组件。components部分等价于下面：

 components:{
        "componentA": componentA,
        "componentB": componentB,
        "componentC": componentC
},

运行案例 当然这个components :is的用法也兼容vue3，请放心使用。

附件下载

相关资料