Vue - 组件总结

目录

一、组件概念

二、根组件

三、局部组件：根组件 components内绑定，只能在相应实例结构内使用。

三、全局组件：在任意vue实例下都可调用

四、组件之间的数据传递

1 - 父组件 ->子组件（通过props建立联系绑定属性）

2 - 子组件 -> 父组件（通过事件触发）

---

Vue - API 查询

一、组件概念

• 组件与实例一一对应，创建一个实例等同于创建了一个组件；创建一个组件等同于创建一个实例。
• 根组件（new Vue（））的挂载点是根组件的模板。
• 组件都具有模板（template），根组件的模板是挂载点（el）
• 子组件具有自身模板，且根组件是所有子组件的父级（1级…n级）
• template：模板，替换根组件挂载元素。（内部HTML代码块只能包含一个根节点）

二、根组件

总结：

• 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
• 每个组件组件均拥有模板,template
• 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
• 根组件如果不书写自身模板,那么模板就采用挂载点；如果显式书写模块,就会替换挂载点,但根组件必须拥有挂载点

	
	


	
app之上
	

		
{{ msg }}
	
	
app之下

 

三、局部组件：根组件 components内绑定，只能在相应实例结构内使用。

定义： 满足vue语法规则的对象，并且以局部注册，只能在父组件内使用。目的是达到html+css+js的代码复用

总结：

1. 局部组件注册 - template："替换的html语法结构模板"
2. 局部组件注册 - data(){ return { template 内需要的参数：对应值 } }:  或者  data: function(){ return { template 内需要的参数：对应值 } }: 
3. 局部组件注册 - methods：{ template 内所需方法名 () { 方法内执行代码 } }
4. 根组件注册 - el：‘css选择器语法’
5. 根组件注册  - components：{进行全局属性名：组件名}  （components：绑定属性和组件）
   设：全局属性名local-tag，组件名localTag
   1) "localtag": localTag
   2)"localTag": localTag
   3)"local-tag": localTag
   4) localTag: localTag
   5) localTag,   (ES6语法，当二者写法相同时，可以省略，建议)

注意：html不区分大小写，建议使用链接语法；js语言不支持链接语法，建议使用小驼峰写法；
解决方法：使用下划线连接语法

三、全局组件：在任意vue实例下都可调用

总结：

1. 创建全局组件 - Vue.component("组件名", {}
2. 全局组件实例内部 - template：“html语法结构”
3. 全局组件实例内部 - data(){return{template所需变量名：值}} 或者 data：function(){return{template所需变量名：值}}
4. 全局组件实例内部 - methods：{template所需事件方法名(){}}

四、组件之间的数据传递

1 - 父组件 ->子组件（通过props建立联系绑定属性）

总结：

• html结构内建立关系，使用 <自定义组件名 :全局变量名="变量名" >
• 创建组件，内部使用props接受需要从父组件传入的全局属性名
• 全局属性的内部值，由父组件的data内进行处理赋值

2 - 子组件 -> 父组件（通过事件触发）

总结：

1. html内设置自定义事件，<自定义组件名 @自定义事件名="父组件内相应方法名">
2. 组件内，template 设置覆盖事件
3. 组件内，methods内设置template触发调用方法，方法内部进行html事件绑定传参
   this.$emit("html内自定义事件名", this.组件data内变量)
4. 数据定义在子组件的data内
5. 父组件内，methods内对html结构相应的方法进行编码，子组件内data的数据以形参传入

	
	


	

		
		{{ n }}