没有合适的资源?快使用搜索试试~ 我知道了~
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 2 下载量 146 浏览量
2020-11-19
18:10:33
上传
评论
收藏 111KB PDF 举报
温馨提示
试读
4页
一、is的使用 参考Vue 2.0教程,有讲到 is 的使用: 解析 DOM 模板时的注意事项 有些 HTML 元素,诸如 <ul>、<ol>、<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部。 这会导致我们使用这些有约束条件的元素时遇到一些问题。例如: <table> <blog></blog> </table> 这个自定义组件 <blog> 会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的
资源推荐
资源详情
资源评论
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视图要求根据请求数据内容或者用户的选择,来渲染出不同的视图,就需要我们进行动态渲染。
比如:获取了后台的表格数据,可以根据用户的选择切换渲染成表单展示还是列表展示。
此时可以将is的值绑定为一个变量,is就变成了v-bind:is=”变量名”,即 :is=”变量名”。当变量名赋值为哪个自定义组件名时,
weixin_38716423
- 粉丝: 4
- 资源: 929
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页