自定义插件

不管现实多么惨不忍睹,都要持之以恒地相信,这只是黎明前短暂的黑暗而已。不要惶恐眼前的难关迈不过去,不要担心此刻的付出没有回报,别再花时间等待天降好运。真诚做人,努力做事!你想要的,岁月都会给你。自定义插件,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

作用:
步骤:第一步在入口文件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.

m

y

M

e

t

h

o

d

=

f

u

n

c

t

i

o

n

(

)

.

.

.

V

u

e

.

p

r

o

t

o

t

y

p

e

.

myMethod = function(){…} Vue.prototype.

myMethod=function()...Vue.prototype.myProperty = xxxx
}
使用插件:Vue.use()

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/163347.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!