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，谢谢。