vue components 动态组件详解

2024-04-02 19:04:59 741人浏览安东尼

摘要

目录总结总结数组发生变化时，动态加载相应数据场景：点击不同组件名称，界面显示相应组件步骤一：导入所需组件步骤二：点击 tab 选项卡，将对应组件名添加进数组步骤三：使用动态组


<!-- DynamicComponent.Vue -->
<template>
  <section>
    <div v-for="(item, index) in componentData" :key="index">
      <components :is='item.componentName' :params="item.content" />
    </div>
  </section>
</template>
<script>
import PageOne from './pageComponents/PageOne'
import PageTwo from './pageComponents/PageTwo'
import PageThree from './pageComponents/PageThree'
export default{
  name: 'DynamicComponent',
  components: {
    PageOne,
    PageTwo,
    PageThree
  },
  data () {
    return {
      componentData: [
        {
          componentName: 'PageOne',
          content: {
            title: '标题一'
          }
        },
        {
          componentName: 'PageTwo',
          content: {
            title: '标题二'
          }
        }
      ]
    }
  }
}
</script>


<!-- PageOne -->
<template>
  <section>
    {{content}}
  </section>
</template>
<script>
export default{
  name: 'PageOne',
  props: {
    params: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data () {
    return {
      content: this.params.title
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal){
        this.content = newVal.title
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<!-- PageTwo -->
<template>
  <section>
    {{content}}
  </section>
</template>
<script>
export default{
  name: 'PageTwo',
  props: {
    params: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data () {
    return {
      content: this.params.title
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal){
        this.content = newVal.title
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容！

数组发生变化时，动态加载相应数据

场景：点击不同组件名称，界面显示相应组件

步骤一：导入所需组件

步骤二：点击 tab 选项卡，将对应组件名添加进数组

步骤三：使用动态组件，:is 属性绑定组件名


<div v-for="(item, index) in componentData" :key="index">
  <components :is="item.componentName"/>
</div>

案例：监听对象中属性变化，深度监听


<!-- DynamicComponent.vue -->
<template>
  <section>
    <div v-for="(item, index) in componentData" :key="index">
      <components :is='item.componentName' :params="item.content" />
    </div>
  </section>
</template>
<script>
import PageOne from './pageComponents/PageOne'
import PageTwo from './pageComponents/PageTwo'
import PageThree from './pageComponents/PageThree'
export default{
  name: 'DynamicComponent',
  components: {
    PageOne,
    PageTwo,
    PageThree
  },
  data () {
    return {
      componentData: [
        {
          componentName: 'PageOne',
          content: {
            title: '标题一'
          }
        },
        {
          componentName: 'PageTwo',
          content: {
            title: '标题二'
          }
        }
      ]
    }
  }
}
</script>


<!-- PageOne -->
<template>
  <section>
    {{content}}
  </section>
</template>
<script>
export default{
  name: 'PageOne',
  props: {
    params: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data () {
    return {
      content: this.params.title
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal){
        this.content = newVal.title
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<!-- PageTwo -->
<template>
  <section>
    {{content}}
  </section>
</template>
<script>
export default{
  name: 'PageTwo',
  props: {
    params: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data () {
    return {
      content: this.params.title
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal){
        this.content = newVal.title
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue components 动态组件详解

本文链接: https://www.lsjlt.com/news/156908.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

vue components 动态组件详解

目录总结总结数组发生变化时，动态加载相应数据场景：点击不同组件名称，界面显示相应组件步骤一：导入所需组件步骤二：点击 tab 选项卡，将对应组件名添加进数组步骤三：使用动态组...

99+

2022-11-12
Vue动态组件和keep-alive组件实例详解

目录动态组件格式注意点使用效果目录结构操作效果小结keep-alive组件使用背景解决方法使用keep-alive组件小结keep-alive组件-指定缓存语法注意：总结动态组件多...

99+

2022-11-13
vue如何动态加载组件详解

目录使用场景：需要动态导入组件的页面核心组件的代码：使用场景：总结使用场景：项目中需要我们根据不同的业务需求呈现不同的业务场景，如果业务类型简单还好，直接全部引入判断即可，但随着我...

99+

2022-11-13

vue 组件动态加载 vuejs动态加载组件 vue 加载组件
Vue动态组件与异步组件超详细讲解

目录何为动态组件何为异步组件示例解析动态组件异步组件总结何为动态组件动态组件是根据数据的变化，可以随时切换不同的组件，比如咱们现在要展示一个文本框和输入框，我们想要根据我们data...

99+

2023-03-19

Vue动态组件与异步组件 Vue动态组件 Vue异步组件
详解Angular动态组件

目录使用场景怎么实现一、动态组件放在哪二、怎么获取组件的实例使用场景我们先明确下动态组件的使用场景，在代码运行时要动态加载组件，换成普通人话，代码需要根据具体情况（比如用户的操作，...

99+

2022-11-12
vue.js 动态组件详解

:is 动态组件使用 v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示； <div id="app"> <test v-bi...

99+

2022-11-12
详解unplugin vue components不能识别组件自动导入类型pnpm

目录引言效果发现问题问题效果解决问题刨根问底解决方案引言 unplugin-vue-components 是一款能帮助组件自动导入的库，简单点的说，你不需要使用import xx ...

99+

2023-01-28

unplugin vue components组件导入 pnpm识别组件自动导入
vue3动态加载组件以及动态引入组件详解

目录1.问题2.分析3.最后总结1.问题在做一个用vite构建的vue3项目时，动态拉取导入.vue页面，然后控制台一直有以下提示，页面也无法渲染出来。 2.分析根据上面的报错...

99+

2023-03-23

vue 动态加载组件 vue加载组件 vue3动态加载组件
vue3动态组件使用详解

目录vue2vue3markRow：标记一个对象，使其不能成为一个响应式对象。toRaw：将响应式对象（由 reactive定义的响应式）转换为普通对象。shallowRef：只处理...

99+

2023-02-27

vue3中动态组件 vue3动态加载组件 vue3动态添加组件
vue动态组件component

目录1、component2、keep-alive2.1存在的问题2.2使用keep-alive解决2.3keep-alive的生命周期2.4keep-alive 的 include...

99+

2022-11-12
Vue动态组件与内置组件浅析讲解

目录一、动态组件二、内置组件一、动态组件在vue中，有很多的组件可以挂载同一个挂载点上面，要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染，我们可以通过内置组件compon...

99+

2022-11-13
ComponentLoader 与动态组件实例详解

目录引言按组件 ID 加载按组件树路径加载动态组件总结引言组件通过 <Canvas /> 渲染在画布上，内容完全由组件树 componentTree 驱动，但也有一些情...

99+

2023-05-19

ComponentLoader 动态组件 ComponentLoader
深入了解Vue中的动态组件

1、什么是动态组件动态组件指的是动态切换组件的显示与隐藏。（学习视频分享：vue视频教程）2、如何实现动态组件渲染vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。示例代码如下：3、使用 kee...

99+

2022-11-22

Vue
Vue手写dialog组件模态框过程详解

在vue项目下创建文件dialog 实现思路 1、dialog组件为模态框，因此应该是固定定位到页面上面的，并且需要留一定的插槽来让使用者自定义显示内容 2、难点在于如何一句话打开...

99+

2023-02-10

Vue dialog组件 Vue dialog模态框
Vue之组件详解

<body> <div id="root"> <h2>{{name}}</h2> ...

99+

2022-11-12
有关vue 组件切换,动态组件,组件缓存

目录一.组件的切换方式方式一: 使用 v-if和v-else方式二:使用内置组件:<component></component>方式三 : vue-route...

99+

2022-11-12
vue滑动解锁组件使用方法详解

本文实例为大家分享了vue滑动解锁组件的使用，供大家参考，具体内容如下这是一个pc端的滑动解锁组件效果图：话不多说，直接上代码 html部分 <template>...

99+

2022-11-13
vue动态组件如何使用

这篇文章主要介绍“vue动态组件如何使用”，在日常操作中，相信很多人在vue动态组件如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue动态组件如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧...

99+

2023-06-29
Vue中动态组件怎么用

这篇文章将为大家详细讲解有关Vue中动态组件怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。动态组件我相信大部分在开发的过程中都会用到，当我们需要在不同的组件之间进行状态切换时，动态组件可以很好的满足...

99+

2023-06-21
vue可滑动的tab组件使用详解

本文实例为大家分享了vue可滑动tab组件使用的具体代码，供大家参考，具体内容如下需求: 1. 每个tab-item的间距是相同的，可定制 2. 每一个tab-item的宽度是随着...

99+

2022-11-13