02-vue2组件

最新推荐文章于 2025-11-02 14:56:05 发布

原创最新推荐文章于 2025-11-02 14:56:05 发布 · 839 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端

组件的出现是为了解决两个问题：

1、降低整体复杂度，提升代码的可读性和可维护性

2、提升局部代码的可维护性

绝大部分情况下，一个组件就是页面中某个区域，组件包含该区域的：

功能（js代码）

内容（模板代码）

样式（css）

组件开发

创建组件

组件是根据一个普通的配置对象创建的，所以要开发一个组件，只需要写一个配置对象即可，该配置对象和vue实例的配置几乎是一样的。

组件配置对象和vue实例有如下差异：

1、无el；

2、data必须是一个函数，该函数返回的对象作为数据；

3、由于没有el配置，组件的虚拟DOM树必须定义在template或render中。

注册组件

注册组件分为全局注册和局部注册

全局注册

全局注册了一个组件后，整个应用中任何地方都可以使用该组件，即在vue实例中可以使用，在其他组件中也可以使用。

全局组件的注册方式：

Vue.component('new-comp',newComp)
//参数1：组件名称，将来在模板中使用组件时，会使用该名称。
//参数2：组件配置对象。
//该代码运行后，即可在模板中使用组件

一般不建议全局注册组件，除非组件特别通用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <new-comp></new-comp>

</div>
<script src="./vue.min.js"></script>
<script>
    <!--    定义一个组件-->
    var newComp = {
        data() {
            return {
                count:  0
            }
        },
        template : `<button v-on:click="count++">按钮被点击了{{count}}次</button>`
    }
    //注册全局组件
    Vue.component('new-comp',newComp)

    //创建vue实例
    var vm = new Vue({
        el: '#app',//vue控制的元素或区域
        data: { //页面上要使用的数据

        }
    })
</script>

</body>
</html>

局部注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <new-comp></new-comp>

</div>
<script src="./vue.min.js"></script>
<script>
    <!-- 定义一个组件-->
    var newComp = {
        data() {
            return {
                count:  0
            }
        },
        template : `<button v-on:click="count++">按钮被点击了{{count}}次</button>`
    }

    //创建vue实例
    var vm = new Vue({
        el: '#app',//vue控制的元素或区域
        data: { //页面上要使用的数据

        },
        //局部注册组件。
        components: {
            //属性名为组件名，模板中使用该组件名
            // 属性值为组件对象
            'new-comp': newComp
        }
    })
</script>

</body>
</html>

应用组件

在模板中使用组件时，把组件名当作html元素名使用即可

<NewComp/>

<new-comp></new-comp>
使用的是 Vue 2.x,建议使用 kebab-case，大驼峰的写法有不显示的情况。

使用组件注意事项：

1、组件必须有结束，可以自结束，也可以用结束标记结束

2、组件命名可以使用new-comp这种短横线命名方式，也可以使用大驼峰NewComp,如下：

components: {
    'new-comp': newComp,
     NewComp: newComp
    //如果组件对象也叫做NewComp，可以简写为：
    NewComp
    
}

组件树

一个组件创建好以后，会在各个地方使用，它可能多次出现在vue实例中，也可能出现在其他组件中，因而就形成了一颗组件树。

向组件传递数据

大部分组件要完成自身的功能，都需要一些额外的信息

比如一个头像组件，需要告诉它头像的地址，这就需要在使用组件时向组件传递数据

传递数据的方式有很多种，最常见的一种是使用组件属性 component props

首先，在组件中申明可以接收哪些属性，然后在使用组件时，向其传递属性。

注意：在组件中，属性是只读的，不可以更改，这叫单向数据流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <new-comp></new-comp>
    <tittle tille_value ="tittle1"></tittle>
    <tittle tille_value ="tittle2"></tittle>
    <tittle tille_value ="tittle3"></tittle>

</div>
<script src="./vue.min.js"></script>
<script>

    <!-- 定义一个组件-->
    var newComp = {
        data() {
            return {
                count: 0
            }
        },
        template: `
          <button v-on:click="count++">按钮被点击了{{ count }}次</button>`
    }

    //定义一个组件，测试props
    var tittle = {
        //自己要控制的数据用data。其他组件要传递过来的用props
        data() {
            return {
                tittle: "my_tittle",
            }
        },
        //其他组件要传递过来的用props，这个属性会被注入到实例中去
        props:["tille_value"],
        template:`<h1>{{tille_value}}</h1>`

    }

    //创建vue实例
    var vm = new Vue({
        el: '#app',//vue控制的元素或区域
        data: { //页面上要使用的数据

        },
        //局部注册组件。
        components: {
            //属性名为组件名，模板中使用该组件名
            // 属性值为组件对象
            'new-comp': newComp,
            'tittle': tittle
        }
    })
</script>

</body>
</html>

运行结果：