vue 动态组件(component :is) 和 dom元素限制(is)用法说明


Posted in Javascript onSeptember 04, 2020

一、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视图要求根据请求数据内容或者用户的选择,来渲染出不同的视图,就需要我们进行动态渲染。

比如:获取了后台的表格数据,可以根据用户的选择切换渲染成表单展示还是列表展示。

vue 动态组件(component :is) 和 dom元素限制(is)用法说明

此时可以将is的值绑定为一个变量,is就变成了v-bind:is="变量名",即 :is="变量名"。当变量名赋值为哪个自定义组件名时,拥有:is=“变量名”属性的元素就会渲染为哪个组件。由于is的值不再是一章节中的静态的值,而是进行了数据绑定,所以绑定的变量要在data中定义过的。

动态组件的使用场景往往比第一章的解除dom元素限制的场景要复杂一点。虽然is属性在常用的HTML元素上都可以使用的,但常见的解除dom元素限制的场景使用元素一般为<li><option>等。vue为动态组件的使用场景提供了<component>元素。

若要在切换中缓存保留动态渲染组件的状态,可以用<keep-alive>元素将动态组件包裹。举个例子:

<!-- 失活的组件将会被缓存!-->
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

补充知识: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

这里展示一下 组件中的内容

<template>
 // 其他页面也一样,只有背景色与页面的展示名不同,这就不一一介绍了
 <div class="content">我是 OpenInfo 页面</div>
</template>
<script>

export default {
 name:'openInfo'
 data() {
 return {};
 }
};
</script>
<style scoped>
.content {
 display: flex;
 justify-content: space-between;
 width: 1000px; 
 height: 200px;
 background-color: green;
}
</style>

2,config 文件中的配置

const open = function () {
 const vm = 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')
   }
  ]
  }
 ]
 }
 
 export const openModules = vm => {
 return open.call(vm)
 }

3,展示页面中的操作

<template>
 <div class="content">
 <div>我是 index</div>
 <div v-for="(content,index) in openListValue" :key="index">
 <!-- component标签创建动态组件,is属性指向谁,就显示哪个组件 -->
  <component :key="content.index"
  :is="content.component" 
  :ref="content.refName"
  :refName="content.refName"
  ></component>
 </div>
 </div>
</template>
<script>
import { openModules } from "@/config/index";

export default {
 data() {
 return {
  openList: [],
  openListValue: []
 };
 },
 mounted() {
 this.getList();
 },
 methods: {
 getList() {
  this.openList = openModules(vm)[0];
  this.openListValue = this.openList.modules;
 }
 }
};
</script>
<style scoped>
.content {
 padding-top: 20px;
 display: flex;
 flex-direction: column;
 width: 1000px;
}
</style>

页面展示:

vue 动态组件(component :is) 和 dom元素限制(is)用法说明

注:这里配置可以用多个,给他配置里设置一个 type ,通过 type 类型,来控制展示的是那些界面。这里就不多介绍了

以上这篇vue 动态组件(component :is) 和 dom元素限制(is)用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
require.js的用法详解
Oct 20 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
layui自定义工具栏的方法
Sep 19 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
Vue中component标签解决项目组件化操作
Sep 04 #Javascript
JS数组转字符串实现方法解析
Sep 04 #Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 #Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 #Javascript
解决vue scoped scss 无效的问题
Sep 04 #Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 #Javascript
基于vue中的scoped坑点解说
Sep 04 #Javascript
You might like
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
JS中style属性
2006/10/11 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
高级护理专业毕业生推荐信
2013/12/25 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
2014年清明节寄语
2014/04/03 职场文书
文明寝室申报材料
2014/05/12 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
vue递归实现树形组件
2022/07/15 Vue.js