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实现跳转菜单的具体方法
Jul 05 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
详解vue axios二次封装
Jul 22 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
javaScript Array api梳理
Mar 31 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实现只保留mysql中最新1000条记录
2015/06/18 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
js的event详解。
2006/09/06 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
对于Python中线程问题的简单讲解
2015/04/03 Python
python读取文件名并改名字的实例
2019/01/07 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
对孩子的寄语
2014/04/09 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
学习之星事迹材料
2014/05/17 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
婚宴致辞
2015/07/28 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL