首页 > 其他分享 >vue中is的作用和用法

vue中is的作用和用法

时间:2022-10-11 14:31:15浏览次数:43  
标签:vue component 用法 html 作用 组件 my 模板

vue中is的作用和用法_html

is的作用


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


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


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

my-component是我们自己写的组件,但是html在渲染dom的时候,my-component对ul来说并不是有效的dom,甚至会报错。


is的诞生

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


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

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


is的用法

<component> + is 的骚操作

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

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


不受html模板限制的情况


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

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

也就是说只有在用cdn方式写vue的时候才会出现这种问题?开发基本用框架,好像没啥事的样子。


本文完~

vue中is的作用和用法_赋值_02

vue中is的作用和用法_赋值_03

标签:vue,component,用法,html,作用,组件,my,模板
From: https://blog.51cto.com/u_15809510/5746323

相关文章

  • js中 问号点(?.)和双问号(??)的用法
    当访问多层对象属性(比如res.data.list)时,如果属性res.data为空,则会报引用错误,为此我们不得不这么处理:letdataList=res&&res.data&&res.data.list//......
  • jenkins nohup 不起作用问题处理
    原答案:  https://issues.jenkins.io/browse/JENKINS-60593 OK,Igotsomethingworking.Ihaveascriptfileontheremoteserverwiththis:nohupjava-ja......
  • vue3中tab详情页多开keepalive根据key去动态缓存与清除缓存
    一.场景由于存在tab栏,当从查询页面点击列表进入详情时,需求是详情页都会新开一个tab,并缓存,tab中的切换不会重新加载详情页数据,但是关闭一个详情tab,再次从查询页点击这条详......
  • memo、useCallback、useMemo的区别和用法
    memo、useCallback、useMemo的区别和用法发布于2021-12-0611:26:26阅读 3980 react在渲染父子嵌套组件的时候,有时会发生不必要的渲染,根据经验总结出来,大致有......
  • vue-router:history和hash的区别
    前言:写这个随笔是因为后端部署时,第一次进入页面无问题,刷新后页面空白,寻找原因发现有两个解决方案;1、后端nginx做保底映射,映射到正确的路径;2、前端更改为hash模式也可解决......
  • 如何运行别人的Vue项目
    1、将项目里的“node_modules”文件夹删除,一般“node_modules”文件夹太大,一般不会打包上传到svn、git上的,所以没有这个文件夹就不用删。2、删除package-lock.json。它是......
  • vue项目启动cannot get,并且还有报错信息..
    项目中需要下载vue-table-with表单组件,需要第三方依赖库下载。结构npm下载失败,直接先下载yarn--再下载vue-table-with组件----结构整个项目崩溃了。一直报错...卸载了ya......
  • 以太网光纤收发器有什么作用?
    以太网光纤收发器是一款提供以太网数据信号到光纤数据信号的双向透明转换器,可以将以太网信号通过光纤线路传输突破传输距离100米的限制,使得以太网网络覆盖得到极大的延伸。......
  • Vue3的模板语法
    1.插值语法1.1基本使用点击查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • “数字化转型升级”是什么意思,到底有什么作用?
    数字化转型升级就是用用数字化转型方式来让企业获得提升,上升到一个新的台阶。数字化的主要含义是构建“业务数字化、数字资产化、资产服务化、服务业务化”闭环,通过数字化......