vue中动态组件

曾经终败给现在 2022-12-17 07:29 176阅读 0赞

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：效果如下

![2020102319164871.gif][]

灰色的两个按钮A,B 用于切换组件，红色边框和蓝色边框的是具体组件的样子；

具体代码：

组件A:

<template>
      <div style="width:80px;height:60px;border:1px solid red;margin: 0 auto;">组件A</div>
    </template>
    <script>
    export default {
      name: "compa",
      data() {
        return {};
      },
      methods: {},
    };
    </script>
    <style lang="less" scoped>
    </style>

组件B类似，只是style的宽高等不一致；

父组件代码：

<template> 
      <div>
        <component :is="currentView"></component>
        <button @click="handleChangeView('compa')">A</button>
        <button @click="handleChangeView('compb')">B</button>
      </div>
    </template> 
    <script>
    import compa from "./compA.vue";
    import compb from "./compB.vue";
    export default {
      name: "Table",
      components: { compa, compb, },
      data() {
        return {
          currentView: "compa",
        };
      },
      methods: {
        handleChangeView(component) {
          this.currentView = component;
        },
      },
    };
    </script>

说明：组件切换主要是通过 Vue 的 `<component>` 元素加一个特殊的 `is`  attribute 来实现：

[2020102319164871.gif]: /images/20221123/b5df28d2307444fe85dc7bb10b1f42a2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

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

相关阅读

相关 Vue.js中的动态组件和异步组件

Vue.js中的动态组件和异步组件在Vue.js中，动态组件和异步组件是两个常用的技术，用于处理动态加载和渲染组件的需求。虽然它们都可以实现动态加载和渲染组件的功能，但

向右看齐/ 2024年03月16日 14:52/ 0 赞/ 29 阅读

相关 vue 动态组件+全局组件+keepAlive

vue 动态组件+全局组件+keepAlive 故心故心故心故心小故冲啊 -------------------- 文章目录 vue 动态组件+全局组件+

旧城等待，/ 2022年12月25日 14:51/ 0 赞/ 238 阅读

相关 vue中动态组件

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：效果如下 ![2020102319164871.gif][] 灰色的两个按钮A,B 用于切换组

曾经终败给现在/ 2022年12月17日 07:29/ 0 赞/ 177 阅读

相关 Vue动态组件渲染

子组件封装动态切换的子组件一 <template> <div> 我是多行文本框{ { config.name }

今天药忘吃喽~/ 2022年11月10日 05:38/ 0 赞/ 191 阅读

相关【Vue】—动态组件

【Vue】—动态组件 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiB

迈不过友情╰/ 2022年09月11日 12:22/ 0 赞/ 184 阅读

相关 Vue动态组件

Vue动态组件 1、序言 2、实例 1、序言在页面应用程序中，经常会遇到多标签页面，在Vue.js中，可以通过动态组件来实现。组件的动态切换是通

╰+攻爆jí腚メ/ 2022年08月30日 01:56/ 0 赞/ 190 阅读

相关 vue中的动态组件

1. 动态组件是由vue内置标签component上的is属性确定的，is属性的值，就是组件的名字第二种方法，用v-for，需要注意的是，type的值只是用来做标识的

约定不等于承诺〃/ 2022年04月16日 02:00/ 0 赞/ 260 阅读

相关 vue中动态渲染组件的方法

在项目中，我们会经常遇到动态加载不同组件（内容）的场景，也就是想通过一个页面，根据不同的参数或者条件，来加载不同的内容。那在vue里，给大家提供了一个很简单的方法，使用comp

左手的ㄟ右手/ 2021年09月30日 13:18/ 0 赞/ 1016 阅读

相关 vue——动态组件

通过使用保留的 `<component>` 元素，动态地绑定到它的 `is` 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组

ゞ浴缸里的玫瑰/ 2021年09月14日 12:58/ 0 赞/ 424 阅读

相关 vue 动态组件

1、引入组件,并在components中注入 2、动态组件 <component :is='x'></component> is

矫情吗；*/ 2021年07月24日 23:23/ 0 赞/ 456 阅读