Vue_003_Vue组件核心概念

组件概览

• 小型的、可复用、独立的UI模块
• Vue组件 = Vue实例 = new Vue(options)
• 不同组件仅是options的不同，主要的前端工作围绕此展开
• 三大核心概念：属性、事件、插槽

三大核心

属性

属性分类

• 自定义属性props

组件props中声明的属性

• 原生属性attrs

没有声明的属性，默认自动挂载到组件根元素上
设置inheritAttrs为false可以关闭自动挂载

• 特殊属性class、style

挂载到组件根元素上
支持字符串、对象、数组等多种语法

事件

事件分类

• 普通事件

@click、@input、@change、@xxx等事件
通过this.$emit{(}^{\prime }xx{x}^{\prime },\dots )触发（this.$emit子组件向父组件传值）

• 修饰符事件

@input.trim、@click.stop、@submit.prevent等
一般用于原生HTML元素，自定义组件需要自行开发支持

插槽

插槽分类

• 普通插槽
• 作用域插槽

拓展

e.target.value和this的区别

1. e.target.value获取的就是你选择接受事件的元素输入的或者选择的值

   • 参数e接收事件对象, 而事件对象也有很多属性和方法
   • target属性是获取触发事件对象的目标，也就是绑定事件的元素，e.target表示该DOM元素
   • value获取其相应的属性值。

2. this指向当前事件所绑定的元素

3. 区别（事件绑定的元素内部有没有子元素）

如果有子元素的话e.target指向这个子元素，如果没有，e.target和this都指向事件所绑定的元素。