组件: 对某功能或某模块的封装(例如 咱们写的弹窗,loading)
插件: 对一系列组件的封装(例如 vuex,vue-router)
关系: 插件能够封装组件,组件暴露数据给插件javascript
1.开箱即用
2.功能比组件更强大,更丰富
3.一次引入,终生收益
4.打包带走,随走随用
5.能够上传到npm官网装X(面试加分项)vue
由于插件是基于组件的,因此得先有一个组件
咱们模仿一个element ui的简单组件(弹窗提示)
在src下面新建一个plugin的文件夹,文件夹内新建一个toast.vue的组件java
<template> <div> <div class="toast" ref='toastPosition' :class="{active: toastHidden}"> <div class="toast-warpper"> {{text}} </div> </div> </div> </template> <script> export default { **// 须要注意的是 这个组件必定要有一个name,咱们使用的时候直接调取name** name: 'test-toast', data () { return { text: '', toastHidden: false } }, created () { // this.toastPlugin() }, components: { }, methods: { **// 定义一个操做它的方法 打开和关闭** toastPlugin (msg, time) { this.text = msg this.toastHidden = true //若是用户传了时间 就使用用户传过来的时间 if(time){ setTimeout(() => { this.toastHidden = false }, time) }else{ //不然使用插件定义好的默认时间 这里设计2s后自动关闭 setTimeout(() => { this.toastHidden = false }, 2000) } } } } </script> <style> .toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0px; min-height: 0px; text-align: center; background: rgba(0, 0, 0, 0.5); border-radius: 5px; color: #fff; transition: all 0.5s; z-index: -1; opacity: 0; } .toast.active { width: 150px; min-height: 25px; opacity: 1; z-index: 11; } </style>
let test = {} test.install = function (Vue, options) { // install的第一个参数Vue表示的是Vue的实例(Vue对象), // 第二个参数表示的是一些设置选项。 //在这里咱们也能够定义一些全局的属性和方法 Vue.prototype.$msg = 'Hello I am test.js' Vue.prototype.$myMethod = ()=> { //do something } **// 把这个组件挂到全局** Vue.component(testToast.name, testToast) // testPanel.name 组件的name属性 } // 暴露这个入口文件 不然其它页面调取不了 export default test
//把咱们写好的组件引入进来 import testToast from './toast.vue' //全局注册组件 Vue.use(testToast);
这样全局均可以使用了,而不是哪一个页面使用都须要import引入。web
在任何一个页面,直接调用就行了面试
//这个就是咱们刚刚在组件里定义的name <test-toast ref="toast"></test-toast> //也能够调取插件里定义的方法 this.$nextTick(()=>{ //调用插件定义全局的方法 this.$myMethod(); //调用插件定义全局的属性 console.log(this.$msg); //调用插件的方法 打开弹窗提示 //若是传了5000,则该插件5s后关闭,不然2s自动关闭 this.$refs.toast.toastPlugin('请填写内容',5000); })
设计插件的时候必定要看(这里以咱们刚刚作好的这个插件为例)
1.一致性(与现实生活一致,界面保持一致,统一风格)
2.反馈 (使用生效给用户反馈)例如:弹窗出现
3.效率 (简化流程,清晰明确)例如:直接拿name使用
4.可控 (用户决策,结果可控)例如:有默认时间,用户也能够自由设置vue-router
1.需求分析: 存在是有意义的:这款插件主要为了解决什么问题
2.可扩展性 :不多有百分百吻合业务的插件:用户能够基于这个插件扩展本身的需求
3.组件组合 :知足多样化需求:例如list,能够在input里,能够在表格里
4.架构体系 : 1.继承体系:全部组件源头都是继承一个核心组件。2.进行分类(容器组件,功能组件分开)vuex