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

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

ws_code_csdn

3941人浏览 · 2020-10-29 19:05:54

ws_code_csdn · 2020-10-29 19:05:54 发布

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

突然想到了可以把新增的组件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>

实现最终的效果：

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^