【Vue】组件化编程

定义
实现应用中局部功能代码和资源的集合
为什么要用组件化编程？
传统方式编写：依赖关系混乱，不好维护，且代码复用率不高
模块化编写：只关注解决js，复用js，简化js的编写与效率
组件方式编写：好维护、复用率更高、提高运行效率

在组件出现之前，我们开发基本都是用html、js、css，

1 组件

单文件组件

一个文件中只有1个组件

非单文件组件

一个文件中包含有n个组件

1.1 组件使用流程

1 创建组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别:

1 不写el。最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
2.data必须写成函数。避免组件被复用时，数据存在引用关系，data是对象会导致，组件值改变会影响另一个组件的值

使用template可以配置组件结构。
在Vue2官网中中也明确规定，组件的data必须是一个函数
在这里插入图片描述

const School = Vue.extend({
   
        name:'School', // 组件名
        template:`<div>School----</div>`,
        data(){
   
            return{
   }
        },
        methods:{
   }
})

2 注册组件

const vm = new Vue({
   
        el: '#root',
        components:{
   School},
        data() {
   
            return {
   
            }
        },
        
    })

3 使用组件

<div id="root">
   <School></School>
</div>

1.2 组件细节点

1.关于组件名:

单个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):Schoo1
多个单词组成:
第一种写法(kebab-case而名): my-school(不建议如此)
第二种写法(CamelCase命名): Myschool (需要Vue脚手架支持)

(1).组件名尽可能回避HTML中已有的元素名称，例如: h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法: < school></ schoo1>
第二种写法: < school/> （不用使用脚手架时，< schoo1/>会导致后续组件不能渲染）
3 简写方式:
const school = Vue.extend(options) 可简写为: const school = options

1.3 关于VueComponent

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.只需要写< school/>或< school></ school>，Vue解析时会帮我们创建school组件的实例对象。
即Vue帮我们执行的：new VueComponent(options)
3.特别注意: 每次调用Vue.extend，返回的都是一个全新的VueComponent!!!
4.关于this指向: