Vue笔记_02_组件化编程
第二章 组件化编程
非单文件组件
Vue中使用组件的三大步骤
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
如何定义一个组件?
使用Vue.extend(options)
创建,其中options
和new Vue(options)
时传入的那个options
几乎一样,但是也有区别
区别如下:
-
el
不要写,为什么?—最终所有的组件都要经过一个vm
的管理,由vm
的el
来决定服务那个容器 -
data
必须写成函数,为什么?—避免组件被复用时,数据存在应用关系备注:使用
template
可以配置组件结构
如何注册组件?
- 局部注册:靠
new Vue
时传入components
选项 - 全局注册:靠
Vue.components('组件名', 组件)
编写组件标签
<school></school>
几个注意点:
-
关于组件名:
一个单词组成:
- 第一种写法(首字母小写):
school
- 第二种写法(首字母大写):
School
多个单词组成:
- 第一种写法(kebab-case命名):
my-school
- 第二种写法(CamelCase):
MySchool
(需要Vue脚手架支持)
备注:
- 组件名尽可能回避HTML中已有的元素名称,例如
h1
- 可以使用name配置项指定组件在开发者工具中呈现的名字
- 第一种写法(首字母小写):
-
关于组件标签
-
第一种写法:
<school></school>
-
第二种写法:
<school/>
备注:不使用脚手架时,
<school/>
会导致后续组件不能渲染
-
-
一个简写方式:
const school = Vue.extend(options)
可以简写成:const school = options
关于VueComponents
-
school
组件本质就是一个名为VueComponent
的构造函数,且不是程序员定义的,是Vue.extend
生成的 -
我们只需要写
<school></school>
,Vue
解析的时候会帮我们创建一个school
组件的实例对象即:
Vue
会帮我们执行new VueComponent(options)
-
特别注意:每次调用
Vue.extend
返回的都是一个全新的VueComponent
!!! -
关于
this
指向问题:-
组件配置中:
data
函数,methods
中的函数,watch
中的函数,computed
中的函数,他们的this
均是VueComponent实例对象
-
new Vue(options)
配置中:data
函数,methods
中的函数,watch
中的函数,computed
中的函数,他们的this
均是Vue实例对象
-
-
VueComponent
的实例对象,以后简称vc
(也可以称之为:嘴贱实例对象)Vue的实例对象以后简称
vm
一个重要的内置关系
- 一个重要的内置关系:
VueComponent.prototype.__proto__ === Vue.prototype
- 为什么要有这个关系呢:让组件实例对象(vc)可以访问到Vue原型上的属性和方法
单文件编程
(待补)