自定义插件

作用:
步骤:第一步在入口文件main.js平级位置定义一个插件,文件为xxx.js

export default{
    install(Vue,x,y,z){
    //传递的参数
        console.log(x,y,z);
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })
         // 定义全局指令
        Vue.directive('fbind',{
            // 指令与元素成功绑定时(一上来)
            bind(element,binding){
                element.value = binding.value
            },
            // 指令所在元素被插入页面时
            inserted(element,){
                element.focus()
            },
            // 指令所在的模板被重新解析是

            updated(element,binding) {
                element.value = binding.value
            }
        })
        // 定义混入
        Vue.mixin({
            data(){
                return{
                    x:100,
                    y:200
                }
            }
        })
        // 给Vue原型上添加一个方法(vm和vc就能用了)
        Vue.prototype.hello = ()=>{alert('原型上的方法')}
    },
   
}

第二步在入口文件main.js中引入插件

// 该项目的入口文件
import Vue from 'vue'
// 引入App组件 他是说要组件的父组件
import App from './App.vue'
// 引入自定义插件
import plugins from './plugins'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 应用插件
Vue.use(plugins,1,2,3)
// 创建Vue实例对象 --vm
new Vue({
  el:'#app',
  // 完成了将App组件放入容器中
  render: h => h(App),
})

 

功能:用于增强Vue
本质:包含install方法的一个对象 install第一个参数是Vue 第二个以后的参数是插件使用者传递的数据。
定义插件:
对象.install = function(Vue.options){
//1.添加全局过滤器
Vue.fillter(…)
//2.添加全局指令
Vue.directive(…)
//3.配置全局混入
Vue.mixin(…)
//4.添加实例方法
Vue.prototype.$myMethod=function()...Vue.prototype.$myProperty = xxxx
}
使用插件:Vue.use()