一、组件的定义与使用

1、vue文件的组成

（1）模板页面

（2）js模块对象

（3）样式

2、基本使用

（1）引入组件

（2）映射成标签

（3）使用组件标签

3、关于标签名与标签属性名书写问题

（1）写法一：一模一样

（2）写法二：大写变小写，并用-连接

4、组件间通信基本原则

（1）不要在子组件中直接修改父组件的状态数据

（2）数据在哪，更新数据的行为（函数）就应该定义在哪

5、使用组件标签时

<my-component name='tom' :age='3' :set-name='setName'></my-component>

6、定义MyComponent时

（1）在组件内声明所有的props

（2）只指定名称

（3）指定名称和类型

（4）指定名称/类型/必要性/默认值

注意：

（1）此方式用于父组件向子组件传递数据

（2）所有标签属性都会成为组件对象的属性，模板页面可以直接引用

（3）问题：

a.如果需要向非子后代传递数据必须多层逐层传递

b.兄弟组件间也不能直接props通信，必须借助父组件才可以

7、vue自定义事件

（1）绑定事件监听

方式一：

通过 v-on 绑定

方式二：

通过 &on()

8、触发事件

 this.&emit(eventName, data)

9、消息订阅与发布

（1）订阅消息

PubSub.subscribe('msg', function(msg, data){})

（2）发布消息

PubSub.publish('msg', data)

注意

优点：此方式可实现任意关系组件间通信（数据）

10、事件的 2 个重要操作(总结)

1）绑定事件监听 (订阅消息)

目标: 标签元素 <button>

事件名(类型): click/focus

回调函数: function(event){}

2）触发事件 (发布消息)

DOM 事件: 用户在浏览器上对应的界面上做对应的操作

自定义: 编码手动触发

11、slot

（1）理解

此方式用于父组件向子组件传递`标签数据

（2）子组件: Child.vue

（3）父组件: Parent.vue