Vue 组件化

目录

1. 概念

2. 非单文件组件的使用

 2.1 组件注意点

2.2 组件嵌套

 2.3 VueComponent 函数

2.4 内置关系 

3. 单文件组件（重点）

3.1 Student.vue

3.2  App.vue

3.3 main.js 文件：

3.4 index. html 

3.5 总结

---

1. 概念

• 组件定义：实现局部功能代码和资源的集合
• 非单文件组件：一个文件中包含n个组件
• 单文件组件：一个文件只有一个组件

2. 非单文件组件的使用

1.创建组件

• const student=Vue.extend({ date(){}; })
• 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
  • 1.el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
  • 2.data必须写成函数，为避免组件被复用时，数据存在引用关系。
• 备注：使用template可以配置组件结构。

2. 注册(局部)组件：

• new Vue({template` `,components:{组件名student} })
• 局部注册：靠new Vue的时候传入components选项
• 全局注册：靠Vue.component('组件名',组件)

3. 编写组件标签：

• 在html里面写

    
    
    
    
    



    

        
vue组件化学习
        
        
        
    

 2.1 组件注意点

组件名写法

• 一个单词组成： (首字母小写)school，(首字母大写)：School
• 多个单词组成：(kebab-case命名)：my-school、(CamelCase命名)：MySchool (需要Vue脚手架支持)
• 一般使用首字符大写的写法，到开发者工具相同

• 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

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

组件标签:

• 第一种写法：
• 第二种写法：
• 备注：不用使用脚手架时，会导致后续组件不能渲染。

简写方式：

• const school = Vue.extend(options) 可简写为：const school = options

2.2 组件嵌套

如 嵌套一个student 和 teacher，student和teacher是兄弟关系

注意在创建（定义）组件时写，关系要从小到大的顺序写，如先有兄弟，再写父级关系

		const school = Vue.extend({
			template:`
				
	
					
					
				
			`,
			components:{
				student,
				teacher
			}
		})

 2.3 VueComponent 函数

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

• 4.关于this指向：

• (1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

• (2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

• 5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

2.4 内置关系 

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

3. 单文件组件（重点）

3.1 Student.vue

单位件组件都是以.vue结尾的，要经过webpack、vue-cil脚手架才可以使用

一个标准的组件应该有html、css、JavaScript三个文件，

• : 组件html结构，里面根元素只有一个
• : 放组件交互相关的代码（data（函数式有return）、methods）
• : 组件css样式，如果没有样式可以不写

vscode需要安装vetur插件才可以识别以上的标签

script标签里面首先要暴露组件，有以下三种方式

• 分别暴露：export const Student=vue.extend({})
• 统一暴露：export {Student} 
• 默认暴露：default export Student，
• 以上const Student=vue.extend({}) 可简写 default export {name：‘组件名’} 以默认暴露为例
• 一般在组件时使用默认暴露，因为引入方式简单用 import xxx from xxx

注意：.vue 文件只可以使用以上这几个标签

3.2  App.vue

如果安装了vetur插件可以使用快捷键 可以快速生成三大模板和暴露组件