Vue-mixins选项

Vue-mixins选项

Mixins用于：

　　1.已经写好了构造器，还要增加方法或者临时的活动时使用的方法，用混入能减少源代码的污染。

　　2.公用方法，用混入的方法可以减少代码量，实现代码重用。（使用全局混入）

顺序：全局混入 > 构造器之外的混入 > 原生的混入

原生中：

1         updated:function(){
2             console.log("这是原生")
3         }

构造器之外的混入：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <div id="vueMixins">
11         <h2>Vue-mixins选项</h2>
12     <div>
13         <p>{{num}}</p>
14         <p><button @click="add()" >增加</button></p>
15     </div>
16     </div>
17 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
18 <script>
19     var addNews={           //后来的内容用变量接收
20         updated:function(){
21             console.log("你好啊，地球");
22         }
23     }
24     var app=new Vue({
25         el:"#vueMixins",
26         data: {
27             num: 16,
28         },32         methods: {
33             add:function(){
34                 this.num++;
35             },
36         },
37         mixins: [ addNews ]   // 把上面的变量在这里应用
38     });
39 </script>
47 </body>
48 </html>

全局混入：

 1 <script>
 2 
 3     Vue.mixin({
 4         updated:function(){
 5             console.log("这是全局混入");
 6         }
 7     })
 8     var app=new Vue({
 9         el:"#vueMixins",
10         data: {
11             num: 16,
12         },
13         methods: {
14             add:function(){
15                 this.num++;
16             },
17         }
18        
19     });
20 </script>

猜你喜欢