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

最新推荐文章于 2025-06-14 19:15:41 发布

原创最新推荐文章于 2025-06-14 19:15:41 发布 · 769 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

本文详细介绍了在Vue.js中如何自定义组件、指令和事件。首先，通过实例展示了如何封装一个Loading组件，包括创建目录结构和编写index.js。接着，讨论了指令的作用和使用方式，包括全局和局部注册。最后，探讨了自定义事件的发布与订阅，以及在组件生命周期中如何使用v-on进行事件绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 自定义组件（插件）

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

第三方的ui库/组件库

自定义封装

过程：
创建一个目录文件夹，称之为Loading
在loading中创建一个叫做component目录，用来放模板
在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. 自定义指令

指令是用来操作DOM
指令的使用形式：属性

自定义指令方式有两种：

全局注册指令
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. 自定义的事件

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

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

<div id="app">
    <button @click = 'fn'> 点击 </button>
</div>

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