传统编码采用的模块化，存在依赖关系混乱，不好维护的问题，并且代码复用率不高。Vue采用了组件化编程，组件是指实现应用中局部功能代码和资源的集合，集合中包含了对应的html、css，js文件。

组件分为非单文件组件和单文件组件，非单文件组件表示一个文件中包含多个组件，单文件组件表示一个文件中只包含有1个组件。

Vue中使用组件

定义组件

定义组件，使用Vue.extend(options)创建，options是配置对象，注意配置对象中：

不需要写el，因为所有的组件都会被vm管理，vm决定服务哪个容器。
data配置项必须写成函数形式，避免组件复用时数据存在引用关系。
使用template配置组件结构，template中只能有一个根元素。

        // 创建学校组件 也可以直接简写为const school = {...}
        const school = Vue.extend({
            template: `
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                </div>
            `,
            data(){
                return{
                    name: '尚硅谷',
                    address: '北京'
                }
            },
            methods: {
  
            },
        })
        // 创建学生组件
        const student = Vue.extend({
            template: `
                <div>
                    <h2>学生名称：{{name}}</h2>
                    <h2>学生年龄：{{age}}</h2>  
                </div>
            `,
            data(){
                return{
                    name: '小松',
                    age: 18
                }
            }
        })

注册组件

注册组件，这里采用的是局部注册方式。

组件名

一个单词组成：

首字母小写：school
首字母大写：School

多个单词组成：

kebab-case：my-school
CameCase：MySchool(需要脚手架支持)

        new Vue({
            el: '#root',
            data: {
                msg: 'Hello world！'
            },
            // 第二步：局部注册组件
            components: {
                school: school,
                student: student
            }
        })

备注：子组件种可以使用name配置项指定组件在开发者工具中呈现的名字。

除了局部组件还有全局注册组件，这样所有的Vue实例都可以使用该组件。

    Vue.component('school', school);

使用组件

第三步在父组件模板中使用组件(写组件标签)，可简写为<school/> (需要脚手架支持)。

    <div id="root">
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
    </div>

定义组件时可以使用name配置项指定组件在开发者工具中呈现的名字。

VueComponent

组件本质是一个名为VueComponent的构造函数，是Vue.extend(options)时生成的。写了组件标签后，Vue解析时会自动创建组件的实例对象，即 new VueComponent(options)。

每次调用Vue.extend时，返回的都是一个全新的VueComponent。
组件中的data函数、methods中的函数、watch中的函数，computed中的函数的this都指向VueComponent的实例对象，简称vc。

组件实例对象与Vue实例对象的本质关系：VueComponent.prototype.__proto__ === Vue.prototype，这样就可以让组件实例对象可以访问到Vue原型上的属性和方法。

单文件组件

单文件组件的使用，我们需要新建后缀名为.vue格式的文件，它需要通过webpack或者Vue提供的脚手架进行编译，在单文件组件中：

template标签表示组件的HTML结构。
script标签表示组件的交互。
style标签表示组件的样式。

其中在交互中，我们需要暴露组件模块，可以使用默认暴露exprot default，并且省略Vue.extend()，因为Vue在执行过程中会自动判断对象是否是组件的实例对象。

因为省略了Vue.extend()，所以我们定义组件时需要使用name配置项给组件命名。

        <!-- 组件的结构 -->
        <template>
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <hr>
                <Student></Student>
            </div>
        </template>

        <!-- 组件的交互 -->
        <script>
            export default {
                name: 'School',
                data(){
                    return{
                        name: '尚硅谷',
                        address: '北京'
                    }
                },
                methods: {
                },
                components: {
                    student: student
                }
            }
        </script>

        <!-- 组件的样式 -->
        <style>
            h2 {
                background-color: orange;
            }
        </style>

我们需要新建一个App组件作为管理者，用于管理其它子组件。通过import引入子组件并且注册。

        <template>
            <div>
                <School></School>
                <Student></Student>
            </div>
        </template>

        <script>
            // 引入子组件
            import School from './School.vue';
            import Student from './Student.vue';

            export default {
                name: 'App',
                components: {
                    School,
                    Student
                }
            }
        </script>

        <style>

        </style>

我们还需要新建一个main.js文件作为入口文件，用于创建Vue的实例，引入组件管理者App并且注册，注意这里可以写上App的模板，或者在容器文件中写。

        // 引入组件管理者App
        import App from './App';

        new Vue({
            el:"#root",
            // 使用App组件
            template: '<App></App>',
            data: {

            },
            components: {
                App
            }
        })

最后新建一个html文件作为容器，注意这里除了要引入main.js文件以外还要引入vue.js文件。

        <body>
            <div id="root">

            </div>
            <script type="text/javascript" src="../js/vue.js"></script>
            <script type="text/javascript" src="./main.js"></script>
        </body>

Vue组件化编程