首页 > 其他分享 >Vue强大的插件功能,你也可以自定义实现想要功能!

Vue强大的插件功能,你也可以自定义实现想要功能!

时间:2022-10-05 23:02:51浏览次数:55  
标签:插件 vue 自定义 value element Vue plugins

插件定义

插件通常用来为 Vue 添加全局功能。

插件的功能范围没有严格的限制——一般有下面几种:

  1. 添加全局方法或者 property。如:vue-custom-element

  2. 添加全局资源:指令/过滤器/过渡等。如 vue-touch

  3. 通过全局混入来添加一些组件选项。如 vue-router

  4. 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。

  5. 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

——以上内容摘至 Vue 官网

定义插件

​plugins.js文件内容​

export default {
install(Vue){
//全局过滤器,只保留value的前三位
Vue.filter('defineSlice',function (value) {
return value.slice(0,3)
})

//定义全局指令,在bind指令所实现的内容基础上,增加自动获取焦点的功能
Vue.directive('definebind',{
//指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
})

//定义混入
Vue.mixin({
data(){
return {
province:"hubei",
city:"wuhan"
}
}
})

//给Vue原型上添加一个方法(vm和vc就都能用了)
Vue.prototype.hello_world = ()=>{alert('你好,世界!')}
}
}

使用插件

1. 注册插件

​main.js文件内容​

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from "./plugins"
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用(使用)插件
Vue.use(plugins)

//创建vm
new Vue({
el:'#app',
render: h => h(App)
})

注意:

(1). 先在​​main.js​​​文件中使用​​import plugins from "./plugins"​​​语句导入插件​​plugins​

(2). 再使用​​Vue.use(plugins)​​进行全局注册插件

2. City.vue 组件使用插件 definebind 指令

​City.vue组件内容​

<template>
<div>
<h2>城市名称:{{name}}</h2>
<input type="text" v-definebind:vaule="name">
</div>
</template>

<script>
export default {
name:'City',
data() {
return {
name: 'wuhan'
}
}
}
</script>

注意:

在组件内部具体使用插件定义的功能时,需要使用​​v-definebind​​​的形式,与 ​​Vue​​​内置的​​v-bind​​​指令是同样的使用方法,切记不能直接通过​​definebind​​的形式使用。

3. Province.vue 组件使用插件 defineSlice & hello_world 方法

​Province.vue组件内容​

<template> <div> <h2>省份名称:{{name | defineSlice}}</h2> <button @click="test">点我测试插件实现的hello_world方法</button> </div> </template> <script> export default { name:'Province', data(){ return { name: 'hubei' } }, methods: { test(){ this.hello_world() } } } </script>

注意:

  1. 页面上展示的省份名称是被​​defineSlice​​截取过的,最终只展示前三个字符:'hub'
  2. 点击​​button​​按钮,会弹框提示:你好,世界!

小结

1.因为​​plugins.js​​​文件中定义了​​mixin​​​混合,且整个​​plugins.js​​​是在​​main.js​​文件中进行了全局注册

所以每个组件的​​data 配置项​​​下都会有​​province:"hubei", city:"wuhan"​​两个属性值,如果相同的属性名,则以组件内部自定义的为准。

2.插件本质是用于增强​​Vue​​​,包含​​install​​​方法的一个对象,​​install​​​的第一个参数是​​Vue​​,第二个以后的参数是插件使用者传递的数据。

插件的使用步骤如下:

  • 定义插件
  • 注册插件
  • 使用插件

欢迎关注​​无量测试之道​​​公众号

Vue强大的插件功能,你也可以自定义实现想要功能!_python

添加关注,让我们一起共同成长!

标签:插件,vue,自定义,value,element,Vue,plugins
From: https://blog.51cto.com/u_14204796/5733036

相关文章