组件化管理

组件化开发

我们可以很直观的将一个复杂的页面分割成若干个独立组件，每个组件包含组件的逻辑和样式,再将这些独立组件完成一个复杂的页面。这样既减少了逻辑复杂度，又实现了代码的重用。页面是组件的容器，组件自动组合形成完整的界面，当不需要某个组件时，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

组件化开发的好处

提高开发效率
方便重复使用
便于协同开发
更容易被管理和维护

在vue中例如div、span都可以看做一个组件

全局组件

全局组件:可以声明一次在任何地方使用
局部组件:必须告诉这个组件属于谁

一般写插件的时候全局组件使用的多一些

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue</title>
</head>

<body>
    <div id="app">
        <my-handsom></my-handsom>
        <my-handsom></my-handsom>
        <my-handsom></my-handsom>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    Vue.component("my-handsom",{ //一个对象可以看成一个组件
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })
    var vm = new Vue({
        el: '#app'
    })
</script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

组件名不要带大写，多组件使用 -
只要组件和定义相同是可以的(首字母可以大写)
html采用短横线隔开命名法js中转驼峰也是可以的

局部组件注册

我们可以在一个组件中，再次注册另外一个组件，这样就构成了父子关系。

可以通过components 来创建对应的子组件。

组件的创建过程如下：

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父子组件创建</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <father></father>
    </div>
    <script>
        Vue.component('father', {
            template: '<div><p>我是父组件</p><son></son></div>',
            components: {
                // 创建一个子组件
                son: {
                    template: '<p>我是子组件</p>'
                }
            }
        })
        var vm =  new Vue({
            el: '#app',
            data: {

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

组件的本质

vue中的组件经历如下过程组件配置 =>VueComponent实例 => render()=> Virtual DOM=> DOM 所以组件的本质是产生虚拟DOM

关于这块内容，在后面的课程中还会深入的探讨，包虚拟dom,以及vue的源码。

组件化管理 #

组件化开发 #

组件化开发的好处 #

全局组件 #

局部组件注册 #

组件的本质 #