【动态组件】vue 动态创建不同的组件利用循环遍历 component is 解决问题

最新推荐文章于 2024-05-27 21:21:32 发布

屋昂仼

最新推荐文章于 2024-05-27 21:21:32 发布

阅读量3.8k

点赞数 3

分类专栏： vue element 文章标签： vue javascript

本文链接：https://blog.csdn.net/jmszl1991/article/details/109366670

版权

vue 同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

element

9 篇文章 0 订阅

订阅专栏

现在有个需求，点击按钮生成不同的组件，同时要在每个组件中记录一下当前组件的索引值。

突然想到了可以把新增的组件push到一个数组中维护，然后拿到数组中的索引值放进新增的组件中。同时利用 component 解决东投资组件的问题。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>component</title>
</head>
<body>
    <div id="app">
        {{name}}
        <!-- 点击增加组件leg1 -->
        <button @click="handleClick1">click and push component1</button>

        <!-- 点击增加组件leg1 -->
        <button @click="handleClick2">click and push component2</button>

        <!-- 在这里循环遍历存储组件的数组，动态渲染 -->
        <template v-for="(item, key) in cmps">
            <component
            :index="key" 
            :key="key"
            :is="item">
            </component>
        </template>
        
    </div>

    <!-- 这是组件1 --组件名称为 leg1 -->
    <template id="l1">
        <div>
            {{legname}} - {{index}}
        </div>
    </template>

    <!-- 这是组件2 --组件名称为 leg2 -->
    <template id="l2">
        <div>
            {{legname}} - {{index}}
        </div>
    </template>

   
    <!-- 引入 vue cdn -->
    <script crossorigin="anonymous" integrity="sha512-h3aCJRk6tEHugDYUidF7GqixhzgeXSiSdq5U+5oLIJtIncSQq6eev48qqYfuTdrsH5Q1eO4IAmyJGDwzRaWNNQ==" src="https://lib.baomitu.com/vue/2.6.12/vue.common.dev.js"></script>
    <script>
        // 声明组件1
        var leg1 = {
            template: '#l1',
            data () {
                return {
                    legname: 'leg001'
                }
            },
            props: {
                index: {
                    type: Number
                }
            }
        }
        
        // 声明组件2
        var leg2 = {
            template: '#l2',
            data () {
                return {
                    legname: 'leg002'
                }
            },
            props: {
                index: {
                    type: Number
                }
            }
        }

        // 初始化vue
        new Vue({
            el: '#app',
            data: {
                name: 'hehe',
                cmps: []
            },
            components: {
                leg1,
                leg2
            },
            methods: {
                // 添加组件1
                handleClick1 () {
                    this.cmps.push("leg1");
                    console.log('now this cmps length: ', this.cmps.length)
                },
                // 添加组件2
                handleClick2 () {
                    this.cmps.push("leg2");
                    console.log('now this cmps length: ', this.cmps.length)

                },
            },
        })
    </script>
</body>
</html>

实现最终的效果：

最终大功告成。虽然整体不难，但是反映到业务需求上，一时间突然没想到，记录一下。

屋昂仼

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【动态组件】vue 动态创建不同的组件利用循环遍历 component is 解决问题

现在有个需求，点击按钮生成不同的组件，同时要在每个组件中记录一下当前组件的索引值。突然想到了可以把新增的组件push到一个数组中维护，然后拿到数组中的索引值放进新增的组件中。同时利用 component 解决东投资组件的问题。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi
复制链接

扫一扫