浅谈Vue中的自定义组件、指令、事件

最新推荐文章于 2024-07-20 18:39:05 发布

nerao

最新推荐文章于 2024-07-20 18:39:05 发布

阅读量680

点赞数

分类专栏： Vue 文章标签： Vue 自定义

本文链接：https://blog.csdn.net/nerao/article/details/90677917

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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 //将loading 暴露出来

2. 自定义指令

Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
自定义指令
1. 指令是用来操作DOM
2. 指令的使用形式：属性
3. 自定义指令方式有两种：
- 全局注册指令
  Vue.directive( 指令的名称，指令的配置项 )
- 局部注册指令
  directives: {
  ‘指令名称’: 指令的配置项
  }
  研究：
- 指令的配置项提供了5个钩子函数以及钩子函数中的参数
  1. el 指令绑定的元素
  2. binding 指令的详细信息
  3. vonde 当前绑定元素的信息
  4. oldVnode 上一个绑定元素的信息
全局注册

//指令全局注册
    Vue.directive( 'focus', {  //自定义的指令的名称和配置项  配置项中提供了五个钩子函数
        bind( el,binding,vnode,oldVode) {//调用一次 ， 指令绑定在元素上时触发
        },
        inserted(el,binding,vonde,oldVonde){ //  当前绑定的元素插入父节点时触发
        },
        update ( el, binding, vnode, oldVnode ) {  // 当前指令绑定的元素发生改变时 触发
        },
        componentUpdated ( el,binding,vnode,oldVnode) { //当前绑定元素发生改变，或是子元素发生改变时触发
        },
        unbind ( el,binding,vnode,oldVnode) { // 组件销毁时触发
        }
    })

局部注册

new Vue ({
        el: '#app',
        data: {
        },
        directives: {
        'focus': {
        bind () {},
        inserted () {},
        update () {},
        componentUpdated () {},
        unbind () {}
      }
    }
    })

3. 自定义的事件

自定义事件
事件的发布:通过Vue中的 $o n (^{'} 自定义事件名称^{'} ，回调函数) 事件的订阅 : 通过 V u e 中的$ emit(‘自定义事件名称’)

/*
v-on:aa = ‘fn’
自定义事件
事件的发布
事件的订阅

  自定义事件的使用形式
    1. 组件生命周期中发布事件，通过某一个事件处理程序调用
    2. 绑定在组件身上 ， 通过 v-on 绑定

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