Vue自定义插件的使用

news2024/11/24 19:29:38

通过 Vue 实例绑定方法：

在 plugins.js 文件中创建 filter 过滤器，定义一个只返回前四个字符的方法。

export default {
    install(Vue){
        // 定义过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4);
        })
    }
}

由于我们之前在 main.js 文件中引入过，所以直接在 Home.vue 页面使用即可。

<template>
    <div>
        <h1>{{ title | mySlice }}</h1>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            title: "青青草原喜洋洋股份有限公司"
        }
    }
}
</script>

注：这个插件就相当于在全局注册了一个过滤器，任何地方都可以使用。

注：除了通过 Vue 实例绑定，还可以往 Vue 原型上绑定方法，这样 Vue 实例和组件都能使用这个方法。

通过原型链绑定方法：

在 plugins.js 文件中给 Vue 的原型添加一个自定义方法。

export default {
    install(Vue){
        // 定义过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4);
        })

        // 通过原型链创建方法
        Vue.prototype.hello = () => {
            alert("你好呀！");
        }
    }
}

然后在 Home.vue 页面创建点击事件使用这个方法。

<template>
    <div>
        <h1 @click="hello">{{ title | mySlice }}</h1>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            title: "青青草原喜洋洋股份有限公司"
        }
    }
}
</script>

注：由于 Vue 实例和组件共用一个原型对象，所以这个方法在任何地方也都可以使用。

自定义插件接收参数：

插件还可以接收自定义参数，只需要在引用时传递接收即可。例如：main.js 文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 引入插件
import plugins from './plugins'

Vue.config.productionTip = false

// 使用插件，并传递参数
Vue.use(plugins,1,2,3)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

然后在 plugins.js 文件中的 install 方法里接收。

export default {
    install(Vue,a,b,c){
        console.log(Vue);
        console.log(a,b,c); // 1 2 3

        // 定义过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4);
        })

        // 通过原型链创建方法
        Vue.prototype.hello = () => {
            alert("你好呀！");
        }
    }
}

注：install 方法的第一个参数永远是 Vue 实例的构造函数，之后接收的才是自定义的参数