组件概览
- 小型的、可复用、独立的UI模块
- Vue组件 = Vue实例 = new Vue(options)
- 不同组件仅是options的不同,主要的前端工作围绕此展开
- 三大核心概念:属性、事件、插槽
三大核心
属性
属性分类
- 自定义属性props
组件props中声明的属性
- 原生属性attrs
没有声明的属性,默认自动挂载到组件根元素上
设置inheritAttrs为false可以关闭自动挂载
- 特殊属性class、style
挂载到组件根元素上
支持字符串、对象、数组等多种语法
事件
事件分类
- 普通事件
@click、@input、@change、@xxx等事件
通过this. e m i t ( ′ x x x ′ , … ) 触 发 ( t h i s . emit( 'xxx', …)触发 (this. emit(′xxx′,…)触发(this.emit子组件向父组件传值)
- 修饰符事件
@input.trim、@click.stop、@submit.prevent等
一般用于原生HTML元素,自定义组件需要自行开发支持
插槽
插槽分类
- 普通插槽
- 作用域插槽
拓展
e.target.value和this的区别
-
e.target.value获取的就是你选择接受事件的元素输入的或者选择的值
- 参数e接收事件对象, 而事件对象也有很多属性和方法
- target属性是获取触发事件对象的目标,也就是绑定事件的元素,e.target表示该DOM元素
- value获取其相应的属性值。
-
this指向当前事件所绑定的元素
-
区别(事件绑定的元素内部有没有子元素)
如果有子元素的话e.target指向这个子元素,如果没有,e.target和this都指向事件所绑定的元素。