QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

vue教程

vue中is的作用和用法

 shitouadmin  2023-07-01 09:16:48
is的作用
  1. <ul> 
  2.   <li></li> 
  3.   <li></li> 
  4.   <li></li> 
  5. </ul> 
总所周知,ul里面嵌套li的写法是html语法的固定写法(还有如table,select等)。
  1. //code1 
  2. <ul> 
  3.   <my-component></my-component> 
  4.   <my-component></my-component> 
  5. </ul> 
my-component是我们自己写的组件,但是html在渲染dom的时候,my-component对ul来说并不是有效的dom,甚至会报错。

is的诞生
正是因为html模板的限制,于是就诞生了is。接下来我们就用is解决上面的问题~
  1. <ul> 
  2.   <li is='my-component'></li> 
  3. </ul> 
首先你得注册my-component组件,全局或者局部都成。 <li is='my-component'></li>其实就相当于<my-component></my-component>,语义上是一样一样的,就是解决了html模板的限制。

is的用法
<component> + is 的骚操作
  1. <!-- 组件会在 `件名` 改变时改变 --> 
  2. <component :is="组件名变量"></component> 
只要在data里弄个变量,给变量赋值就能动态的切换组件。这个其实在某些场景还是非常好用的安利一下。

不受html模板限制的情况
vue官网提醒以下来源使用模板的话,这条限制是不存在的:

字符串 (例如:template: '...')
单文件组件 (.vue)
<script type="text/x-template">

¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《vue中is的作用和用法》发布于石头博客文章,作者:shitouadmin,如若转载,请注明出处:https://www.pweb123.com/frame/vue/969.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序