Vue笔记_02_组件化编程

第二章 组件化编程

非单文件组件

Vue中使用组件的三大步骤

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

如何定义一个组件？

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

区别如下：

1. el不要写，为什么？—最终所有的组件都要经过一个vm的管理，由vm的el来决定服务那个容器

2. data必须写成函数，为什么？—避免组件被复用时，数据存在应用关系

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

如何注册组件？

1. 局部注册：靠new Vue时传入components选项
2. 全局注册：靠Vue.components('组件名', 组件)

编写组件标签

<school></school>

几个注意点：

1. 关于组件名：

   一个单词组成：

   • 第一种写法（首字母小写）：school
   • 第二种写法（首字母大写）：School

   多个单词组成：

   • 第一种写法（kebab-case命名）：my-school
   • 第二种写法（CamelCase)：MySchool（需要Vue脚手架支持）

   备注：

   • 组件名尽可能回避HTML中已有的元素名称，例如h1
   • 可以使用name配置项指定组件在开发者工具中呈现的名字

2. 关于组件标签

   • 第一种写法：<school></school>

   • 第二种写法：<school/>

     备注：不使用脚手架时，<school/>会导致后续组件不能渲染

3. 一个简写方式：

   const school = Vue.extend(options)可以简写成：const school = options

关于VueComponents

1. school组件本质就是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

2. 我们只需要写<school></school>，Vue解析的时候会帮我们创建一个school组件的实例对象

   即：Vue会帮我们执行new VueComponent(options)

3. 特别注意：每次调用Vue.extend返回的都是一个全新的VueComponent！！！

4. 关于this指向问题：

   • 组件配置中：

     data函数，methods中的函数，watch中的函数，computed中的函数，他们的this均是VueComponent实例对象

   • new Vue(options)配置中：

     data函数，methods中的函数，watch中的函数，computed中的函数，他们的this均是Vue实例对象

5. VueComponent的实例对象，以后简称vc（也可以称之为：嘴贱实例对象）

   Vue的实例对象以后简称vm

一个重要的内置关系

1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
2. 为什么要有这个关系呢：让组件实例对象（vc）可以访问到Vue原型上的属性和方法

单文件编程

（待补）