vue中is的做用和用法

回顾vue官方文档的过程当中发现了is这个特性,虽然以个人写代码风格实在用不上,不过仍是记录一下这个知识点html

is的做用

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

总所周知,ul里面嵌套li的写法是html语法的固定写法(还有如table,select等)。vue

//code1
 <ul>
  <my-component></my-component>
  <my-component></my-component>
</ul>

my-component是咱们本身写的组件,可是html在渲染dom的时候,my-component对ul来讲并非有效的dom,甚至会报错。框架

is的诞生

正是由于html模板的限制,因而就诞生了is。接下来咱们就用is解决上面的问题~dom

<ul>
  <li is='my-component'></li>
</ul>

首先你得注册my-component组件,全局或者局部都成。 <li is='my-component'></li>其实就至关于<my-component></my-component>,语义上是同样同样的,就是解决了html模板的限制。code

is的用法

<component> + is 的骚操做

<!-- 组件会在 `件名` 改变时改变 -->
<component :is="组件名变量"></component>

只要在data里弄个变量,给变量赋值就能动态的切换组件。这个其实在某些场景仍是很是好用的安利一下。component

不受html模板限制的状况

vue官网提醒如下来源使用模板的话,这条限制是不存在的:
字符串 (例如:template: '...')
单文件组件 (.vue)
<script type="text/x-template">
也就是说只有在用cdn方式写vue的时候才会出现这种问题?开发基本用框架,好像没啥事的样子。
哈哈哈~到此结束,祝你生活愉快cdn

相关文章
相关标签/搜索