Vue mixin(混入) && 插件

2022-05-31 10:33:08 阅读：150 来源： 互联网

标签：... 插件 Vue binding 混入 value element &&

 1 # mixin(混入)
 2 #    功能：可以把多个组件公用的配置提取成一个混入对象
 3 #    使用方法：
 4 #        第一步：{data(){return {...}}, methods:{...},...}
 5 #        第二步：1.全局混入：Vue.mixin(xxx)、2.局部混入：mixins:[xxx]
 6 
 7 # Vue 插件
 8 #    第一步：定义插件  plugins.js
 9 export default {
10     install(Vue, a, b, c){  // a, b, c为Vue.use()时传入的参数
11         console.log(a, b, c)
12         // 定义全局过滤器
13         Vue.filter('mySlice', function(value){
14             return value.slice(0,4)
15         });
16 
17         // 定义全局指令
18         Vue.directive('big-number',{ 
19             bind(element, binding){
20                 element.value = binding.value;
21             },
22             inserted(element, binding){
23                 element.setFouse();
24             },
25             update(element, binding){
26                 element.value = binding.value;
27             }
28         })
29 
30         // 定义混入
31         Vue.mixin({...}); // 全局混入
32         Vue.mixin({...});
33 
34         // 给原型添加方法
35         Vue.prototype.hello = () =>{alert('hello a!')}
36     }
37 }
38 #    第二步：引入插件
39 Vue.use(plugins, 1, 2, 3)
40 
41 # scoped样式
42     作用：让样式在局部生效，防止样式名冲突
43     写法：<style scoped>

标签：...,插件,Vue,binding,混入,value,element,&&
来源： https://www.cnblogs.com/watermeloncode/p/16329505.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue mixin(混入) && 插件