插件

import Vue from 'vue'
import Pop from './index.vue'

//创建Dialog构造器
let PopConstrutor = Vue.extend(Pop)
let instance

const pop = function(options = {}) {
    //设置默认参数为对象，如果参数为字符串，参数中message属性等于该参数，回调函数为空
    if(typeof options === 'string') {
        options = {
            content: options,
            onOk: () => {},
            onCancel: () => {}
        }
    }
    //创建实例
    instance = new PopConstrutor({
        data: options
    })
    //将实例挂载到body下
    document.body.appendChild(instance.$mount().$el)
}

export default pop

vue文件

export default {
    name: 'pop',
    data() {
      return {
        //显示标题，默认为“提示”
        title: '提示',
        //显示内容
        content: '',
        //左按钮显示文本，默认为“取消”
        left_buttton: '取消',
        //右按钮显示文本，默认为“确定”
        right_buttton: '确定'
      }
    },
    methods: {
      //点击取消按钮
      cancel() {
        this.onCancel()  //点击取消的回调函数
        this.$destroy(true)  //销毁组件
        this.$el.parentNode.removeChild(this.$el)  //父元素中移除dom元素（$el为组件实例）
      },
      //点击确定按钮
      ok() {
        this.onOk()  //点击确定的回调函数
        this.$destroy(true)  //销毁组件
        this.$el.parentNode.removeChild(this.$el)  //父元素中移除dom元素（$el为组件实例）
      }
    }
}

挂载

1.引入封装好的全局组件地址
import 组件名 from './地址' //一般放置在./src/components下

2.导出
exports default{
    install (app) {
    // 此处形参为main.js文件中use()方法自动传进来的Vue实例
        app.component('自定义组件名,最好与组件内的name一致', 组件名)
    }
}

3.main.js中挂载到Vue实例中

import { createApp } from 'vue'
import App from './App.vue' //vue3中引入Vue实例方式

import component from './components'// 引入公共组件
// 链式添加一项 .use(component) 来引入配置好的公共组件
createApp(App).use(component).mount('#app')
4.使用
<自定义组件名 />

调用

//传入对象参数
    this.$pop({
      title: '提示',
      content: '这是一段提示信息',
      left_buttton: '取消',
      right_buttton: '确定',
      onOk: () => {
          console.log('ok');
      },
      onCancel: () => {
          console.log('cancel');
      }
    })

    //传入字符串参数（该参数会做为参数中content属性的值，回调函数为空）
    // this.$pop('这是一段提示信息')

指令

el: 父级元素对象，binding：子元素对象，vnode：虚拟节点

import Vue from 'vue'
import loading from '@/components/loading'
const loadingDireives = {
  /**
   * 元素插入父节点时调用
   * @param {dom元素} el 
   * @param {dom元素绑定的信息} binding 
   */
   inserted(el, binding) {
    // 获取自定义组件
    const loadingCor = Vue.extend(loading)
    // 实列化组件
    const loadingComp = new loadingCor().$mount()
    // 元素插入父节点时调用
    el.inserted = loadingComp
    
    // 绑定的值为true时
    if(binding.value) {
      // 插入元素
      append(el)
    }
  },

  /**
   * 组件的 VNode 更新时调用
   * @param {dom元素} el 
   * @param {dom元素绑定的信息} binding 
   */
  update(el, binding) {
    // 新的值不等于旧的值
    if(binding.value != binding.oldValue) {
      binding.value ? append(el) : remove(el)
    }
  }
}

function append(el) {
  el.appendChild(el.inserted.$el)
} 

function remove(el) {
  el.removeChild(el.inserted.$el)
}

export default loadingDireives

1.创建文件并导出配置
export default {
    install(app){
        app.directive('自定义指令名',{ //在创建自定义名称时不要带v-,使用时再携带
            mounted(el,binding){
                // el 为携带自定义指令的dom节点
                // binding 为指令后携带的参数通过.value取出
                功能
            }
        })
    }
}
2.main.js文件中注册
import direction from './directives'
createApp(App).use(directive).mount('#app')
3.全局使用
<div v-自定义指令名='...'></div>

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。

vue2.0 插件，指令

插件

指令