22.Vue插件

风落不归处

已于 2022-07-23 19:05:54 修改

阅读量131

点赞数

分类专栏： web前端学习文章标签： vue.js 前端 javascript

于 2022-07-23 19:02:57 首次发布

本文链接：https://blog.csdn.net/weixin_43893483/article/details/125951459

版权

web前端学习专栏收录该内容

31 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vue.js中注册和使用插件，包括全局过滤器、指令、混入和原型方法的定义。通过示例代码展示了如何创建一个名为`plugins.js`的插件，并在Vue应用中应用该插件，实现数据截取、元素焦点控制、数据共享及自定义方法等功能。

摘要由CSDN通过智能技术生成

直接看官方文档

插件 — Vue.js (vuejs.org)

一个简单的插件注册：

插件plugins.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,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

注册插件

//引入Vue
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)
//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})