堃大大的博客
堃大大的博客

vue中的 动态组件(component :is) 和 dom元素限制(is)

一、is的使用

参考Vue 2.0教程，有讲到 is 的使用：

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如 

    、
      、 和  和 ，只能出现在其它某些特定的元素内部。

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

      
   
   
   
   
        
    
    
    
    
      1.
    1. <blog-post-row>blog-post-row>
    2. table>

      3. 这个自定义组件  会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

      
   
   
   
   
        
    
    
    
    
      1. 
     
     
     
     
        
      
      
      
      
        
     
     
     
     
        
     
     
     
     
        
      
      
      
      
        
       
       
       
       <table>
      
      
      
      
        
     
     
     
     
        2. 
    
    
    
    
      2. 
     
     
     
     
        
      
      
      
      
        
     
     
     
     
        
     
     
     
     
        
      
      
      
      
          
       
       
       
       <tr is="blog-post-row">
       
       
       
       tr>
      
      
      
      
        
     
     
     
     
        3. 
    
    
    
    
      3. 
     
     
     
     
        
      
      
      
      
        
     
     
     
     
        
     
     
     
     
        
      
      
      
      
        
       
       
       
       table>
      
      
      
      
        
     
     
     
     
        4.

       

      可以看出，is提供了一个途径，让我们用自定义组件，替换其他的HTML元素。使用时只需加上属性 is="自定义组件名"。

      在这种为了解除dom元素限制，自由渲染自定义组件的场景下，仅需渲染一次，所以is的值写死为自定义组件的名称就可以了。

      另外有些交互场景，是需要动态切换视图组件的。

       

      二、动态组件 ：is的使用

      上面讲了利用is讲元素替换为自定义组件的用法。

      若某个数据结构对应的HTML视图要求根据请求数据内容或者用户的选择，来渲染出不同的视图，就需要我们进行动态渲染。

      比如：获取了后台的表格数据，可以根据用户的选择切换渲染成表单展示还是列表展示。

      vue中的 动态组件(component :is) 和 dom元素限制(is)_第1张图片

      此时可以将is的值绑定为一个变量，is就变成了v-bind:is="变量名"，即 ：is="变量名"。当变量名赋值为哪个自定义组件名时，拥有：is=“变量名”属性的元素就会渲染为哪个组件。由于is的值不再是一章节中的静态的值，而是进行了数据绑定，所以绑定的变量要在data中定义过的。

      动态组件的使用场景往往比第一章的解除dom元素限制的场景要复杂一点。虽然is属性在常用的HTML元素上都可以使用的，但常见的解除dom元素限制的场景使用元素一般为