一、is的使用
参考Vue2.0教程，有讲到is的使用：
解析DOM模板时的注意事项
有些HTML元素，诸如
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：
这个自定义组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的is特性给了我们一个变通的办法：
可以看出，is提供了一个途径，让我们用自定义组件，替换其他的HTML元素。使用时只需加上属性is="自定义组件名"。
在这种为了解除dom元素限制，自由渲染自定义组件的场景下，仅需渲染一次，所以is的值写死为自定义组件的名称就可以了。
另外有些交互场景，是需要动态切换视图组件的。
二、动态组件：is的使用
上面讲了利用is讲元素替换为自定义组件的用法。
若某个数据结构对应的HTML视图要求根据请求数据内容或者用户的选择，来渲染出不同的视图，就需要我们进行动态渲染。
比如：获取了后台的表格数据，可以根据用户的选择切换渲染成表单展示还是列表展示。
此时可以将is的值绑定为一个变量，is就变成了v-bind:is="变量名"，即：is="变量名"。当变量名赋值为哪个自定义组件名时，拥有：is=“变量名”属性的元素就会渲染为哪个组件。由于is的值不再是一章节中的静态的值，而是进行了数据绑定，所以绑定的变量要在data中定义过的。
动态组件的使用场景往往比第一章的解除dom元素限制的场景要复杂一点。虽然is属性在常用的HTML元素上都可以使用的，但常见的解除dom元素限制的场景使用元素一般为
若要在切换中缓存保留动态渲染组件的状态，可以用元素将动态组件包裹。举个例子：
补充知识：vue利用component组件和is属性实现动态组件
我刚学了一种vue新的布局方式，通过config配置，利用component组件和is属性来控制页面里面展示内容，在这里简单做一个dome
1，首先新建一些组件的vue页面
这个文件的目录，其中component中的是页面展示的组件
src assets//静态文件 component//组件文件 BaseInfo.vue OpenInfo.vue CommentReview.vue OrderInfo.vue config//配置文件 index.js view//页面内容 index.vue
这里展示一下组件中的内容
//其他页面也一样，只有背景色与页面的展示名不同，这就不一一介绍了 我是OpenInfo页面 .content{ display:flex; justify-content:space-between; width:1000px; height:200px; background-color:green; }
2，config文件中的配置
constopen=function(){ constvm=this return[ { //type：‘'可以通过type类型来判断展示那些组件内容 modules:[ { id:'baseInfo', refName:'baseInfo', component:()=>import('@/component/open/BaseInfo') }, { id:'lineInfo', refName:'lineInfo', component:()=>import('@/component/open/OpenInfo') }, { id:'reviewInfo', refName:'reviewInfo', component:()=>import('@/component/open/CommentReview') }, { id:'orderInfo', refName:'orderInfo', component:()=>import('@/component/open/OrderInfo') } ] } ] } exportconstopenModules=vm=>{ returnopen.call(vm) }
3，展示页面中的操作
我是index .content{ padding-top:20px; display:flex; flex-direction:column; width:1000px; }
页面展示：
注：这里配置可以用多个，给他配置里设置一个type，通过type类型，来控制展示的是那些界面。这里就不多介绍了
以上这篇vue动态组件(component:is)和dom元素限制(is)用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
