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

前言

        你們好啊，我又來了此次繼續咱們上週的話題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，謝謝。