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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
angular select 默认值设置方法
Jun 23 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
django 模型字段设置默认值代码
2020/07/15 Python
Pycharm调试程序技巧小结
2020/08/08 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
python实现定时发送邮件
2020/12/23 Python
python 对xml解析的示例
2021/02/27 Python
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
采购主管的岗位职责
2013/12/17 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
房屋公证委托书
2014/04/03 职场文书
小学生评语大全
2014/04/18 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
python中 Flask Web 表单的使用方法
2022/05/20 Python
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS