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

女爷i 2022-10-24 11:52 429阅读 0赞

一、is的使用

参考Vue 2.0教程，有讲到 is 的使用：

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如

*  、

1.  、

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

可以看出，is提供了一个途径，让我们用自定义组件，替换其他的HTML元素。使用时只需加上属性 is="自定义组件名"。

在这种为了解除dom元素限制，自由渲染自定义组件的场景下，仅需渲染一次，所以is的值写死为自定义组件的名称就可以了。

另外有些交互场景，是需要动态切换视图组件的。

二、动态组件 ：is的使用

上面讲了利用is讲元素替换为自定义组件的用法。

若某个数据结构对应的HTML视图要求根据请求数据内容或者用户的选择，来渲染出不同的视图，就需要我们进行动态渲染。

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

![a4931ef4d369f254b9838153ea4d80ab.png][]

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

动态组件的使用场景往往比第一章的解除dom元素限制的场景要复杂一点。虽然is属性在常用的HTML元素上都可以使用的，但常见的解除dom元素限制的场景使用元素一般为

等。vue为动态组件的使用场景提供了元素。

若要在切换中缓存保留动态渲染组件的状态，可以用元素将动态组件包裹。举个例子：

补充知识：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 页面

export default \{

name:"openInfo"

data() \{

return \{\};

\};

.content \{

display: flex;

justify-content: space-between;

width: 1000px;

height: 200px;

background-color: green;

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，展示页面中的操作

我是 index

:is="content.component"

:ref="content.refName"

:refName="content.refName"

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;

\};

.content \{

padding-top: 20px;

display: flex;

flex-direction: column;

width: 1000px;

页面展示：

![19daacebd962bc501336582799268c1a.png][]

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

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

原文链接：https://blog.csdn.net/u013926550/article/details/95311848

[a4931ef4d369f254b9838153ea4d80ab.png]: /images/20221024/0fc3811df6d443d69e50d9784a5c3b27.png
[19daacebd962bc501336582799268c1a.png]: /images/20221024/11a52ac115bb42f8a5282f2c4afe1acb.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 php is_exist,PHP is_file与file_exists用法分析

相关 mysql when is null_mysql中is null语句的用法分享

相关 is属性用法 vue_vue 动态组件(component :is) 和 dom元素限制(is)用法说明

相关 [IS-IS] IS-IS路由协议的基本知识及配置

相关 vuejs的：is和is使用和区别

相关 vue16-is属性

相关 is_int() 、is_integer()、is_long() 函数

相关 is_float()、 is_double()、is_real()函数

相关通过component标签加上is属性动态切换组件

相关 vue 切换组件保持之前状态keep-alive、Component动态组件、is属性解决标签内部标签限制