Vue 插件
功能:增强 Vue
本质:包含 install 方法的一个对象,install 的第一个参数是 Vue,第二个以后的参数是插件使用者传递的数据
定义插件
对象.install = function (Vue, options) {
// 添加全局过滤器
Vue.filter(...)
// 添加全局指令
Vue.directive(...)
// 配置全局混入
Vue.mixin(...)
// 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = function = xxx
}
使用插件:Vue.use()
实例
src 文件结构
|-- src
|-- App.vue
|-- main.js
|-- plugins.js
|-- components
|-- School.vue
|-- Student.vue
App.vue
<template>
<div id="app">
<School/>
<hr>
<Student/>
</div>
</template>
<script>
import School from "@/components/School";
import Student from "@/components/Student";
export default {
name: 'App',
components: {
School,
Student
},
data() {
return {}
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
// 引入插件
import plugins from "@/plugins";
Vue.config.productionTip = false
// 应用插件
Vue.use(plugins)
new Vue({
render: h => h(App),
}).$mount('#app')
plugins.js
export default {
install(Vue) {
console.log('@ install', Vue)
// 全局过滤器
Vue.filter('mySlice', function (value) {
return value.slice(0, 3)
})
// 定义混入
Vue.mixin({
data() {
return {
a: 1,
b: 2
}
}
})
// 给 Vue 原型上添加一个方法
Vue.prototype.hello = () => {
alert('你好')
}
}
}
School.vue
<template>
<div class="school">
<h2>学校名称:{{name | mySlice}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="test">测试 Hello</button>
</div>
</template>
<script>
export default {
name: 'School',
data() {
return {
name: 'ABCabc',
address: '长沙',
}
},
methods: {
test(){
this.hello()
}
}
}
</script>
Student.vue
<template>
<div class="school">
<h2>姓名:{{name}}</h2>
<h2>性别:{{sex}}</h2>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {
name: '张三',
sex: '男'
}
}
}
</script>