Vue mixins淺談使用方法及需要注意的點

大溼兄發表於2018-07-13
Vue

前言

        大家好啊，我又來了這次繼續我們上週的話題Vue mixins，經過幾天的研究發現Vue mixins並不能代替Vuex全域性狀態管理或者eventvue傳遞引數，究竟為什麼請先看下面的講解。

淺談Vue mixins

        個人理解mixins就是定義一部分公共的方法或者計算屬性,然後混入到各個元件中使用,方便管理與統一修改

        說了這麼多我想大家一定對Vue mixins是什麼一定是迫切想要知道的吧，不急我們現在看看Vue官網是怎麼說的

cn.vuejs.org/v2/guide/mi…

        混入 (mixins) 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。

        通過上面的講解我們可以知道Vue mixins是一種混入方法，它在混入之後會與元件相融合組成新的元件並且裡面的方法重名時是會覆蓋當前方法的，所以命名時需謹慎，好了下面跟我們之前一樣通過實戰來學習Vue mixins的使用方法。

        首先先模擬一個環境進行實戰操作，說個最簡單的大家平常都有用到彈框相信這個大家不會陌生，那麼我就以彈框為例，寫一個彈框彈出的例子。

        第一步建立一個mixins.js，裡面這樣寫

export default {
    data() {
        return {
        //兩個引數控制彈框和遮罩層
            this_pop-up:false,
            this_shade:false
        }
    },
    created() {

    },
    mounted() {},
    methods: {
        pop-up:function(){
            this.this_pop-up=true;
            this.this_shade=true;
        },
        pop-up_close:function(){
            this.this_pop-up=false;
            this.this_shade=false;
        }
    }
 }
複製程式碼

        以上便是我需要的彈出框彈出和隱藏，如果想要加一點動效也可以這裡我不加了。

        之後是引入mixins.js，這時我們建立一個a.vue檔案

<button v-on:click="pop-up()">點我彈框顯示</button>
<div class="shade" v-show="this_shade"></div>
<div class="prpo_up" v-show="this_pop-up">
    <input type="submit" value="關閉">
</div>

import mixins from './mixins.js'
export default {
  name: 'personalcenter',
  data:function(){
      return {
        
      }
  }，
  mixins[mixins]
}

.shade{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #000;
    opacity: 0.3;
    z-index: 100;
}
.prpo_up{
    position: fixed;
    z-index: 2000;
    width: 200px;
    height: 448px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    pointer-events: auto;
    border-radius: 4px;
    background-color: #fff;
}
.prpo_up input{
    font-size: 12px;
    position: absolute;
    left: 40px;
    bottom: 75px;
    width: 332px;
    height: 42px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-radius: 2px;
    background: #3F79FF;
    outline: none;
    cursor: pointer;
    border: 0;
}
複製程式碼

        這樣就完成了呼叫但是這個方法沒有封裝成全域性方法，只能用import的方式進行引用。這裡主要講的也是Vue mixins的使用方法，就不進行全域性引用了。

Vue mixins需要注意的點

        下面我們談談使用Vue mixins需要注意的點，首先大家要明白一點，在使用Vue mixins時方法和引數是不共享的，方法和引數是不共享的，方法和引數是不共享的重要的事情說三遍，不要以為方法套方法這種東西可行，經過我的實測，確實是不行的，比如a.vue和b.vue同時呼叫同一個方法時兩邊的方法和屬性並不互通，說白了Vue mixins就是一個補充，充當元件控制的一個作用但是實際上並參與到傳輸資料的方法中去，說白了可以當成一個外掛或元件進行使用，但是涉及到資料方面還是得自己去傳輸和編寫。以上便是我這期想要說的內容，不過還是建議大家瞭解一下Vue mixins，謝謝。

相關文章