Vue mixins浅谈使用方法及需要注意的点

前言

        大家好啊，我又来了这次继续我们上周的话题Vue mixins，经过几天的研究发现Vue mixins并不能代替Vuex全局状态管理或者eventvue传递参数，究竟为什么请先看下面的讲解。

浅谈Vue mixins

        个人理解mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改

        说了这么多我想大家一定对Vue mixins是什么一定是迫切想要知道的吧，不急我们现在看看Vue官网是怎么说的

https://cn.vuejs.org/v2/guide/mixins.html

        混入 (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，谢谢。

更多专业前端知识，请上 【猿2048】www.mk2048.com