自定义（组件、指令、事件）和组件通信

1. 自定义组件（ 插件 ）

案例： 封装一个 Loading 组件
Loading是用来做什么的？
提升用户体验
loading使用方式很多

1. 第三方的ui库/组件库
2. 自定义封装 过程：
3. 创建一个目录文件夹，称之为Loading
4. 在loading中创建一个叫做component目录，用来放模板
5. 在Loading目录下创建一个index.js

~ import Vue from 'vue'
import tpl from './component/index.html'
const Loading = {
// 自定义封装组件，这个loading对象中必须有一个关键key
install () {
Vue.component( 'Loading', {
template: tpl
})
}
}

export default Loading

1. 使用：

2. 自定义指令

自定义指令

1. 指令是用来操作DOM

2. 指令的使用形式： 属性

3. 自定义指令方式有两种：

   全局注册指令
   Vue.directive( 指令的名称， 指令的配置项 )
   • 局部注册指令
     directives: {
     ‘指令名称’: 指令的配置项
     }
     研究：

   指令的配置项提供了5个钩子函数

   以及钩子函数中的参数

   console.log( 'el',el  ) // el 指令绑定的元素
   console.log( 'binding',binding ) // 指令的详细信息
   console.log( 'vnode', vnode )  // 当前绑定元素的信息
   console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息

案例： 打开网页，input自动获得焦点

3. 自定义的事件

代码示例：

v-on:click = 'aa'
v-on:yyb = 'aa'
v-on:before-enter: ''

• 自定义封装组件的使用
• 自定义事件的第二种使用形式

4. 组件通信 – 单项数据流 >9种

1. 父子组件通信 props接收