自定义组件（插件）、自定义指令、自定义事件

1. 自定义组件（ 插件 ）

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

1. 第三方的ui库/组件库
2. 自定义封装
   1. 过程：
   2. 创建一个目录文件夹，称之为Loading
   3. 在loading中创建一个叫做component目录，用来放模板
   4. 在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
   

2. 自定义指令

1. 指令是用来操作DOM
2. 指令的使用形式： 属性
3. 自定义指令方式有两种：

   • 全局注册指令
     Vue.directive( 指令的名称， 指令的配置项 )

   • 局部注册指令
     directives: {
     ‘指令名称’: 指令的配置项
     }
     研究：

     指令的配置项提供了5个钩子函数 
       - bind：调用一次，指令一绑定在元素身上就会触发
       - inserted：当前绑定的元素插入父节点时调用
       - update：当前指令绑定的元素发生改变
       - componentUpdated：当前绑定元素发生改变，或是子元素发生改变
       - unbind：组件销毁时触发
     以及钩子函数中的参数
       console.log( 'el',el  ) // el 指令绑定的元素
       console.log( 'binding',binding ) // 指令的详细信息
       console.log( 'vnode', vnode )  // 当前绑定元素的信息
       console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息
     

3. 自定义的事件

1. 自定义事件：
   事件的发布 vm.$on(事件的名称，事件的回调)
   事件的订阅 vm.$emit(事件的名称)
2. 自定义事件的使用形式
   1. 组件生命周期中发布事件，通过某一个事件处理程序调用
   2. 绑定在组件身上 ， 通过 v-on 绑定

• v-on:click = ‘aa’
• v-on:yyb = ‘aa’
• v-on:before-enter: ‘’

<div id="app">
     点击 button>
div>

var vm = new Vue({
    el: '#app',
    methods: {
      fn () {
        this.$emit('aa')
      }
    },
    mounted () {
      this.$on('aa',function(){
        alert('aa')
      })
    }
  })