前端学习笔记-vue2-组件

组件

模块与组件、模块化与组件化

1. 模块

   1. 向外提供特定功能的js程序，一般为一个js文件
   2. 作用：复用js，简化js的编写，提高js运行效率

2. 组件

   1. 用来实现局部（特定）功能效果的代码集合
   2. 作用：复用编码，简化项目编码，提高运行效率

3. 模块化：当应用中的js都以模块来编写时，这个应用就是一个模块化的应用

4. 组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

非单文件组件

使用步骤

1 定义组件

1. 使用Vue.extend(options)创建，不写el，data必须使用函数式编写
2. 简写：const 组件名 = options
3. 组件名
   1. 单个单词：
      • 全小写
      • 首字母大写
   2. 多个单词：
      • kebab-case
      • CamelCase（需要脚手架支持）

尽可能回避HTML预留的标签名

可以使用name配置项指定组件在开发者工具中呈现的名字，仅供呈现

2 注册组件

1. 局部注册，在new Vue时传入components选项
2. 全局注册，使用Vue.component(‘组件名’,组件)

3 使用组件

1. 使用： <组件标签></组件标签>
2. 标签写法：
   • <组件标签></组件标签>
   • <组件标签/>（需要脚手架支持）

VueComponent

1. school组件本质是一个名为VueComponent的构造函数，不是程序员定义的，是Vue.extend生成的
2. 当使用标签<school></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

Vue与VueComponent

1. 重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
2. 有了该内置关心，就能让组件实例对象访问到Vue原型上的属性、方法

单文件组件

更多前端学习笔记