Vue Plugin
1.插件简介
插件本质是一个普通函数,第一个参数是Vue,第二个参数是可选参数叫options
function (Vue, options) {
//...插件代码
}
插件往往结合vue.mixin(options)
使用,mixin
本质上是把重复的代码片段混入到Vue组件中,供组件复用逻辑。但是vue.mixin
是一个全局api,它会应用到所有实例,所以不要在这个API做疯狂的事情。
使用vue.mixin
更好的办法是使用插件包裹,因为插件会自动删除,而且就算多次调用Vue.use
应用同一个插件,它会防止重复应用,但是vue.mixin
就不行了。另外使用Vue.use
会让代码更好理解,可以清楚知道应用使用了哪些插件。
2.$.options属性
很多人可能不太清楚$.options
属性,其实每个组件都有$.options
属性它表示实例组件的配置项,配置项可以是组件自身的配置也可以是继承过来的配置项或者是vue.mixin
混入的。
3.编写一个插件
插件实现的功能:每个组件在created之后,监听检查某些数据是否合规,若不合规打印出不合规提示信息。
src/plugins/check.js
export default {
install: (Vue, options) => {
Vue.mixin({
created() {
const rules = this.$options.rules;
if(rules) {
Object.keys(rules).forEach((key) => {
const rule = rules[key];
this.$watch(key, (newValue) => {
const valid = rule.validate(newValue);
if(!valid) {
console.log(rule.message);
}
})
})
}
}
})
}
}
src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import check from './plugins/check';
Vue.config.productionTip = false;
Vue.use(check);
new Vue({
router,
store,
render: function (h) { return h(App) }
}).$mount('#app');
src/App.vue
<template>
<div id="app">
<nav>
<input type="text" v-model="name">
<input type="checkbox" value="Sunny" v-model="people">Sunny
<input type="checkbox" value="Tiffany" v-model="people">Tiffany
<input type="checkbox" value="Jessica" v-model="people">Jessica
<h2>你的偶像有:{{ people }}</h2>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
name: "fireworks99",
people: []
};
},
rules: {
name: {
validate: value => value.indexOf("99") !== -1,
message: "Must include 99"
},
people: {
validate: value => value.length < 3,
message: "Number of idols must be less than 3"
}
}
}
</script>