Vue组件化编程

一、模块

理解：向外提供特定功能的js程序，一般就是一个js文件。
为什么：js文件很多很复杂。
作用：复用js，简化js的编写，提高js运行效率。

模块化：
当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。

二、组件

理解：用来实现应用中局部功能代码和资源的集合。
为什么：一个界面的功能很复杂。
作用：复用编码，简化项目编码，提高运行效率。

组件化：
当应用中的功能都是多组件的方式来编写的，那这个应用就是组件化的应用。

非单文件组件：
一个文件中包含有n个组件。

单文件组件：
一个文件中只包含有一个组件。

三、非单文件组件

Vue中使用组件的三大步骤：

1. 定义组件(创建组件)
2. 注册组件
3. 使用组件(写组件标签)

几个注意点：

• 关于组件名：
          一个单词组成：
              第一种写法(首字母小写)：school
              第二种写法(首字母大写)：School
          多个单词组成：
              第一种写法(kebab-case命名)：my-school
              第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
          备注：
          (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
          (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
• 关于组件标签：
          第一种写法：<school></school>
          第二种写法：<school/>
          备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
• 一个简写方式：
          const school = Vue.extend(options) 可简写为：const school = options

（1）创建组件

script代码：

        // 创建组件需要使用API：extends
        const girl = Vue.extends({
            //newVue里面的配置对象这里的使用方式几乎一样
            //data必须写成函数
            data() {
                return {
                    name: 'Mary',
                    age: 18
                }
            },
        })

        // 创建组件需要使用API：extends
        const boy = Vue.extends({
            //newVue里面的配置对象这里的使用方式几乎一样
            //data必须写成函数
            data() {
                return {
                    name: 'Mike',
                    age: 19
                }
            },
        })

（2）注册组件

script代码：

        //创建vm
        new Vue({
            el: '.root',
            //注册组件（局部注册）
            components: {
                //里面是键值对的方式，当组件名和变量名相同时可缩写
                girl,
                boy
            }
        })

（3）使用组件

使用template可以配置组件结构：

            template: `
            <div>
            <h1>男生信息</h1>
            <h2>姓名：{{name}}</h2>
            <h2>年龄：{{age}}</h2>
            </div>`

            template: `
            <div>
            <h1>女生信息</h1>
            <h2>姓名：{{name}}</h2>
            <h2>年龄：{{age}}</h2>
            </div>`

在html结构中编写组件标签：

    <div class="root">
        <!-- 编写组件标签 -->
        <boy></boy>
        <hr>
        <!-- 编写组件标签 -->
        <girl></girl>
    </div>

最终页面输出效果：

 四、组件的嵌套

注意：注册给谁就把组件标签写在谁的template里边

假设我们准备了一个学校组件和一个学生组件，学生组件包含在学校组件里面。

（一）首先我们需要在定义一个学校组件和一个学生组件：

        const student = Vue.extend({
            template: `
            <h1>学生名字：{{name}}</h1>
            `,
            data() {
                return {
                    name: '张三',
                }
            },
        })

        const school = Vue.extend({
            template: `
            <h1>学校名字：{{name}}</h1>
            `,
            data() {
                return {
                    name: '北京大学',
                }
            },
        })

（二）注册组件

            //在Vue里面注册学校组件
            components: {
                school
            }

            //在学校组件里面注册学生组件
            components: {
                student
            }

（三）使用组件

   //在HTML编写school组件标签
    <div class="root">
        <school></school>
    </div>

    template: `
     <div>
     <h1>学校名字：{{name}}</h1>
    //在school组件里面编写student标签
     <student></student>
     </div>`