持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情
组件
Vue中使用组件的三大步骤:
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
一、如何定义一个组件?
使用Vue.extend(options)创建,其中options 和 new(options)时传入的那个options几乎一样,但也有点区别:
区别如下:
- el不要写,——最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
- data 必须写成函数,—— 避免组件被复用时,数据存在引用关系。
备注:使用template可以配置组件结构
二、如何注册组件?
- 局部注册:考new Vue 的时候传入components选项
- 全局注册:靠Vue.component('组件名',组件)
三、编写组件标签:
几个注意点
-
关于组件名:
一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
多个单词组成:
第一种写法(kebab-case命名):my-school
第二种写法(CamelCase命名):MySchool(需要Vue脚手架支撑)
备注:
- 组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行
- 可以使用name配置项指定组件在开发者工具中呈现的名字
-
关于组件标签:
第一种写法:
第二种写法:
备注:不用使用脚手架时,会导致后续组件不能渲染,也就是说在没有使用Vue脚手架之前,只能渲染一个自闭盒子hhh
-
一个简写方式:
const school = Vue.extend(options) 可简写为: const scholl = options
常见问题
-
为什么组件中的data选项是一个函数,而根实例中是对象
原因:
-
组件是一个独立的整体,那么数据也应该是一个独立的 【 80% 】
-
多人开发,数据如果不是独立的,那么数据会冲突 【 5% 】
-
javascript最大的特点: 函数式编程,而函数本身就有一个独立作用域 【 15% 】
2.为什么组件中的data函数要有返回值,并且返回值是一个对象,不能是其他的吗?
原因:
-
因为data选项要经过es5 Object.defineProperty 属性进行getter和setter设置
-
数据中数据的使用组件的数据,使用范围只能在组件的模板中