Vue.js Mixins 混入使用

基本用法<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">

微雨即至

339人浏览 · 2020-09-14 21:47:41

微雨即至 · 2020-09-14 21:47:41 发布

基本用法

<!DOCTYPE html>
<!-- 
Mixins一般有两种用途：

1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>混入</title>
    <script src = "http://unpkg.com/vue"></script>
</head>
<body>
    <div id= "app">
        <p>num:{{num}}</p>
        <button @click = "add">点击我</button>
    </div>

    <script>
         var addLog = {
             updated:function(){
                 console.log("现在的数据为："+this.num);
             }
         }

         new Vue({
             el:'#app',
             mixins:[addLog],
             data:{
                 num:1
             },
             methods:{
                 add:function(){
                     this.num++;
                 }
             },
             updated:function(){
                 console.log("这里是构造器里的updated方法");
             }
         })
    </script>
</body>
</html>