VUE学习笔记之：组件、循环渲染和生命周期函数的组合使用

最新推荐文章于 2024-05-22 12:06:42 发布

枫林血舞

最新推荐文章于 2024-05-22 12:06:42 发布

阅读量389

点赞数 1

分类专栏：前端 vue 文章标签：组件 v-for循环渲染生命周期函数

本文链接：https://blog.csdn.net/guxuhua123_01/article/details/102521619

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

示例场景：一组用户名字数据，过滤其中满足条件的数据，然后循环给到子组件

首先，

用户名字的数据，示例中可以直接写死在data属性中，实际开发可以在VUE实例化之后(created生命周期函数)获取

代码如下：

data: {
            nameList: [
                {
                    name: 'test1'
                },
                {
                    name: 'test2'
                },
                {
                    name: 'test3'
                },
                {
                    name: 'user1'
                },
                {
                    name: 'user2'
                },
                {
                    name: 'user3'
                }
            ],
            filterName: []
        },

然后是对名字的过滤，过滤后的数据需要在实例上面使用，可以在实例挂载之前做(beforeMount函数)

beforeMount: function () {
            // vue实例挂载前，将名字中包含user的用户筛选出来并存入filterName中
            this.nameList
                .filter(n => n.name.indexOf('user') !== -1)
                .forEach(a => this.filterName.push(a))
            console.log(`满足条件的用户名字是：${this.filterName}`)
        }

然后是组件：

首先，组件的定义使用如下方式：

Vue.component('组件名称', {
        props: ['父组件传值'],
        template: '组件实际的DOM'
    })

再然后，父组件中使用时，该组件名称就可以作为html的一个标签使用，需要传值的话，可以用属性绑定的方式进行，但是绑定的key必须和props中定义的一样，如下

Vue.component('name-template', {
        props: ['name', 'index'],
        template: '<li>第{{index}}个用户的姓名是：{{name}}</li>'
    })

这一段就是我定义的一个组件，使用的时候，如下代码：

<name-template :name="item.name" :index="index+1"></name-template>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE的循环渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul v-for="(item, index) in filterName">
        <name-template :name="item.name" :index="index+1"></name-template>
    </ul>
</div>
</body>
<script>
    // 定义一个组件
    Vue.component('name-template', {
        props: ['name', 'index'],
        template: '<li>第{{index}}个用户的姓名是：{{name}}</li>'
    })
    let vm = new Vue({
        el: '#app',
        data: {
            nameList: [
                {
                    name: 'test1'
                },
                {
                    name: 'test2'
                },
                {
                    name: 'test3'
                },
                {
                    name: 'user1'
                },
                {
                    name: 'user2'
                },
                {
                    name: 'user3'
                }
            ],
            filterName: []
        },
        beforeMount: function () {
            // vue实例挂载前，将名字中包含user的用户筛选出来并存入filterName中
            this.nameList
                .filter(n => n.name.indexOf('user') !== -1)
                .forEach(a => this.filterName.push(a))
            console.log(`满足条件的用户名字是：${this.filterName}`)
        }
    })
</script>
</html>

最后的页面展示效果：