vue组件化编程

一.vue组件化编程

传统的编程方式：

学了vue之后，我们需要了解组件是什么
组件的定义：实现应用中局部功能代码和资源的集合

为什么我们需要组件：
因为一个界面功能很复杂，我们可以利用组件复用编码，简化项目编码，提高运行效率
除了了解组件，我们还需要知道模块化和组件化是什么
什么是模块化：
将庞大的js模块化的拆分成多个js文件
什么是组件化：
应用里面按照功能点拆分的组件

二.vue中如何定义（创建一个组件）

组件有两种编写方式：
非（不是）单文件组件和单文件组件
非单文件组件：一个文件中包含n个组件
单文件组件：一个文件中只包含有1个组件

1.单文件组件

1. 创建组件const a = Vue.extend({ })
   Vue.extend是一个函数要调用，并且调用的时候要传入配置对象（{ }）配置对象里可以传入很多东西都是用于控制组件相关内容
   注意的是，创建vm时候的配置对象几乎都可以在这里面使用

const school = Vue.extend({
        // el: '#root',组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务
        data() {
            return {
                schoolName: '双语幼儿园',
                address: '北京',
            }
        },
    })

• el: '#root',组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务
  组件就是一块砖哪里需要哪里搬，不能把它定义死了
• data要写成函数形式且要有返回值return，如果写成对象形式，A修改school里面的内容，B看到的也是修改之后的，因为对象里面的内容地址是一个，data写成函数形式方便修改
  
  2.注册组件（但是这是一个局部注册）
  在注册组件里要写el，管理着其他的小弟

new Vue({
        el: '#root',
        components: {
           school,//简写形式
           student
        }
    })

components里面是key：value组合，key指的组件名，value指的是组件位置。与创建组件时的a相对应，说明创建组件时的const a这个a只是一个中转变量，简写形式可以把value删掉

上面的创建组件和注册组件只有数据没有结构

const school = Vue.extend({
        template: `
        <div>
        <h2>学校名称:{{schoolName}}</h2>
        <h2>学校地址:{{address}}</h2>
        </div>
        `,
        data() {
            return {
                schoolName: '双语幼儿园',
                address: '北京',
            }
        },

    })

结构写在template里面，加了template:``之后school组件才是真正有意义的组件，school组件里面数据和结构都有

3.编写组件标签

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

只写一遍组件，写两遍组件标签，所有的样式结构都能被复用

2.单文件组件的嵌套

我们要将student组件嵌套在school组件里，需要将student组件写在school组件前面，这样就是先创建后注册将不会报错

接下来是注册组件，在school里面注册student组件
而 school组件里需要写components:{student, }它与data同级

 // 创建school组件
    const school = Vue.extend({
        template: `
        <div>
            <h2>学校名称:{{name}}</h2>
            <h2>学校地址:{{address}}</h2>
            <student></student>
        </div>`,
        data() {
            return {
                name: '双语幼儿园',
                address: '北京'
            }
        },
        components:{
            student,
        }
    })

最后一步编写组件标签，在哪里注册的就编写在哪里，所以只用在school的div里加

他们三者之间的关系：

嵌套vue里面的效果：

app组件嵌套
app是众多组件中选出那个最优秀的组件来引领大家，属于是一人之下万人之上

所以我们只需要将那两下属的标签写在app里，
vue里面也只需要写 components: {app}

// 定义app组件
    const app = Vue.extend({
        template:`
        <div>
            <school></school>
            <hello></hello>
        </div>`,
        components:{
            school,
            hello
        }
    })
    new Vue({
        el: '#root',
        components: {app}
    })

关于VueComponet:
1.school组件的本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.我们只需要写<school></school>或<school/>,vue解析时会帮我们创建school组件的实例对象
即vue帮我们执行的：new VueComponent(options)
3.特别注意：每次调用vue.extend，返回的都是一个个全新的VueComponet
4.关于this指向：
（1）组件配置中：
data函数、methods中的函数、computed中的函数 他们的this均是VueComponet的实例
（2）new VueComponent(options)配置中：
data函数、methods中的函数、computed中的函数 他们的this均是Vue实例对象
5.VueComponet的实例对象，以后简称VC（也可称之为组件实例对象）
vue的实例对象，简称vm

vue和VueComponet的关系：

一个重要的内置关系：VueComponet.prototype.proto===Vue.prototype
为什么会有这个关系：让组件实例对象vc可以访问到vue原型上的属性、方法

3.单文件组件

创建.vue文件，这是最基本的结构，交互，样式

<template>
<!-- 组件的结构 -->
</template>

<script>
    // 组件交互相关的代码(数据、方法)
</script>

<style>
    /* 组件的样式  */
</style>

<template>
    <div class="demo">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
   export default{//直接暴露组件的配置对象
        name:'school',//需要和文件名保持一致
        data() {
            return {
                name: '双语幼儿园',
                address: '北京'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    }
</script>

<style>
    .demo{
        background:orange;
    }
</style>

app.vue汇总所有的组件
打一个<v 模板就出来了