vue 动态组件(component :is) 和 dom元素限制(is)用法说明

一、is的使用

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

解析 DOM 模板时的注意事项

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

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

<table>
 <blog-post-row></blog-post-row>
</table>

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

<table>
 <tr is="blog-post-row"></tr>
</table>

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

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

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

二、动态组件 ：is的使用

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

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

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

注：这里配置可以用多个，给他配置里设置一个 type ，通过 type 类型，来控制展示的是那些界面。这里就不多介绍了

以上这篇vue 动态组件(component :is) 和 dom元素限制(is)用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持来客网。