组件化开发

注册组件的基本步骤

1. 创建组件构造器：调用Vue.extend()
2. 注册组件：调用Vue.component()创建全局组件；将组建构造器放在Vue实例当中来创建局部组件
3. 使用组件：在Vue实例范围内使用组件

父组件与子组件

通信

通过Pass props向子组件传递数据; 通过$emit Events向父组件发送消息

props用法

props值的方式有两种:

• 字符串数组:数组中的字符串就是传递时的名称
• 对象:可以设置传递时的类型,也可以设置默认值

事件用法

• 在子组件中,通过$emit()来触发事件
• 在父组件中,通过v-on来监听子组件事件

直接访问

• 父组件访问子组件:使用$children或者$refs
• $children是一个数组类型
• $refs和$ref指令一起使用
  • 通过ref给某个子组件绑定特定ID
  • 通过this.$refs.<ID>来访问
• 子组件访问父组件:使用$parent(尽量避免使用)

slot

• 在子组件中,使用特殊元素<slot>为子组件开启一个插槽
• 插槽中的内容取决于父组件如何使用
• <slot>中的内容显示:
• 如果没有在父组件中插入任何其他内容,那么就显示默认内容
• 否则,用插入内容替代
• 具名插槽:给slot元素一个name属性

动态组件

异步组件

语法糖

• 注册组件: 直接使用一个对象来代替Vue.extend()创建的组件
• 书写模板: 使用<script type="text/x-template">,<template>来分离HTML