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

时间:2022-10-29 22:49:43

一、is的使用

参考Vue 2.0教程,有讲到 is 的使用:

解析 DOM 模板时的注意事项

有些 HTML 元素,诸如 <ul>、<ol>、<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部。

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

  1. <table>
  2. <blog-post-row></blog-post-row>
  3. </table>

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

  1. <table>
  2. <tr is="blog-post-row"></tr>
  3. </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>元素将动态组件包裹。举个例子:

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

补充知识:vue 利用component组件和is属性实现动态组件

我刚学了一种 vue 新的布局方式,通过config配置,利用component组件和is属性来控制页面里面展示内容,在这里简单做一个 dome

1,首先新建一些组件的vue页面

这个文件的目录,其中component中的是页面展示的组件

  1. src
  2. assets // 静态文件
  3. component // 组件文件
  4. BaseInfo.vue
  5. OpenInfo.vue
  6. CommentReview.vue
  7. OrderInfo.vue
  8. config // 配置文件
  9. index.js
  10. view // 页面内容
  11. index.vue

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

  1. <template>
  2. // 其他页面也一样,只有背景色与页面的展示名不同,这就不一一介绍了
  3. <div class="content">我是 OpenInfo 页面</div>
  4. </template>
  5. <script>
  6.  
  7. export default {
  8. name:'openInfo'
  9. data() {
  10. return {};
  11. }
  12. };
  13. </script>
  14. <style scoped>
  15. .content {
  16. display: flex;
  17. justify-content: space-between;
  18. width: 1000px;
  19. height: 200px;
  20. background-color: green;
  21. }
  22. </style>

2,config 文件中的配置

  1. const open = function () {
  2. const vm = this
  3. return [
  4. {
  5. // type:‘' 可以通过type类型来判断展示那些组件内容
  6. modules: [
  7. {
  8. id: 'baseInfo',
  9. refName: 'baseInfo',
  10. component: () => import('@/component/open/BaseInfo')
  11. },
  12. {
  13. id: 'lineInfo',
  14. refName: 'lineInfo',
  15. component: () => import('@/component/open/OpenInfo')
  16. },
  17. {
  18. id: 'reviewInfo',
  19. refName: 'reviewInfo',
  20. component: () => import('@/component/open/CommentReview')
  21. },
  22. {
  23. id: 'orderInfo',
  24. refName: 'orderInfo',
  25. component: () => import('@/component/open/OrderInfo')
  26. }
  27. ]
  28. }
  29. ]
  30. }
  31.  
  32. export const openModules = vm => {
  33. return open.call(vm)
  34. }

3,展示页面中的操作

  1. <template>
  2. <div class="content">
  3. <div>我是 index</div>
  4. <div v-for="(content,index) in openListValue" :key="index">
  5. <!-- component标签创建动态组件,is属性指向谁,就显示哪个组件 -->
  6. <component :key="content.index"
  7. :is="content.component"
  8. :ref="content.refName"
  9. :refName="content.refName"
  10. ></component>
  11. </div>
  12. </div>
  13. </template>
  14. <script>
  15. import { openModules } from "@/config/index";
  16.  
  17. export default {
  18. data() {
  19. return {
  20. openList: [],
  21. openListValue: []
  22. };
  23. },
  24. mounted() {
  25. this.getList();
  26. },
  27. methods: {
  28. getList() {
  29. this.openList = openModules(vm)[0];
  30. this.openListValue = this.openList.modules;
  31. }
  32. }
  33. };
  34. </script>
  35. <style scoped>
  36. .content {
  37. padding-top: 20px;
  38. display: flex;
  39. flex-direction: column;
  40. width: 1000px;
  41. }
  42. </style>

页面展示:

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

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

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

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