社区首页 >专栏 >mixin 传递参数

mixin 传递参数

吟风者

发布于 2021-11-24 07:09:44

3.5K00

代码可运行

文章被收录于专栏：吟风者吟风者

运行总次数：0

代码可运行

在 Vue2 中，可以通过mixin把一些重复的代码提取出来。

方法一

mixA.vue

// mixA.vue
export default {
  created() {
    console.log('mixin A created...');
}

我想在 Demo.vue 中的created也输出mixin A created...

// Demo.vue
import MixA from './mixA.vue';
export default {
  mixins: [MixA]
}

但是如果我想给mixA传入一个 url 和一些参数，然后发送ajax请求？可以吧mixA写成一个js文件，而不是vue

mixA.js

// mixA.js
/**
 * mixin
 * @param {object} configs 传递过来的，请求时候的参数配置，{ url、params }
 * @returns {function} mixin
 */
export default (configs) => {
  return {
      data:() => ({
        a: 123,
        b: 234,
        dataList: [],  // 装请求来的数据
        ...configs  // 把传递过来的参数混入，这样 this 就有 url 和 请求需要的参数了
      }),
      methods: {
          async getData() {
              const params = {
                    c: 1,
                    d: 2,
                    ...configs.params
              }
              this.dataList = await this.axios.get(this.url, { params });
          }
      },
      created() {
        this.getData();
      }
  }
}

使用的组件：Demo.vue

// Demo.vue
<template>
    <div class="demo-wrap">
        <li v-for="item in dataList" :key="item">{{ item }}</li>  <!-- 这里的 dataList 是 mixA.js 的数据 -->
    </div>
</template>
<script>
    import MixA from './mixA.js';
    // 传递给 mixin 的参数配置
    const configs = {
        url: '/v5/product/game/recommend',
        params: {
            gameId: '',
            cmd: 1,
        },
    };

    const mixa = new MixA(configs);
    export default {
        mixins: [mixa]
    }
</script>

如果像我这种情况，gameId是router过来传过来的，可以在beforeRouteEnter钩子函数中修改，因为mixin的组件，是在使用的组件之前先创建的，也就是说，mixA的created要比Demo.vue的created更先执行，所以可以这样：

// Demo.vue
import MixA from './mixA.js';
// 传递给 mixin 的参数配置
const configs = {
    url: '/v5/product/game/recommend',
    params: {
        gameId: '',
        cmd: 1,
    },
};
export default {
    name: 'demo',

    // 进来之前，修改传给 mixin 的参数配置
    beforeRouteEnter(from, to, next) {
        configs.params.gameId = from.query.gameId;
        next(true);
    },

    mixins: [mixa],
};

方法二

通过window对象进行传递在mixin中对组件的初始化参数进行监听，如果已经初始化，需要传递参数了，那么就对参数进行修改

//mixin js
let viewer = null;
const tools = {
    watch: {
        initialized: function (val) {
            if (val) {
                viewer = window.viewer;
            }
        }
    }
}
export default tools;

//index.vue
<script>
import {mixin} from "@/mixin";
    
let viewer = null;

export default {
  mixins: [mixin],
  name: "Index",
  data() {
    return {
      initialized: false,
    };
  },
  mounted() {
    this.init().then((viewer) => {
      this.initialized = true;
      window.viewer = viewer;
    });
  },
  methods: {
    init: function () {
     viewer = new XXX();//随便写的类
        resolve(viewer);
      })
    }
  },
};
</script>

方法三

新建mixins文件

在src目录下新建mixins目录。mixins目录里新建index.js文件。在这里写一个loadPage路由跳转方法供全局使用

export default = {
  data(){
    return{};
  },
  methods:{
    loadPage(routerName,param){
      if(param){
        this.$router.push({name:routerName,query:param});
      }else{
        this.$router.push({name:routerName});
      }
    }
  }
}

把mixins注册全局

在src/main.js文件加入以下两行

import Mixin from './mixins';
Vue.mixin(Mixin);

加入后，main.js文件如下

import Vue from 'vue'
import App from '@/App'
import router from './router'
import Mixin from './mixins';
Vue.mixin(Mixin);

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

使用mixins里的方法

设置路由

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path:'/',
      redirect:'/index'
    },
    {
      path: '/about',
      name: 'About',
      component:resolve => require(['@/pages/About'],resolve)
    },
    {
      path: '/index',
      name: 'Index',
      component:resolve => require(['@/pages/Index'],resolve)
    },
    {
      path: '/product',
      name: 'Product',
      component:resolve => require(['@/pages/Product'],resolve)
    }
  ]
})

页面调用mixins里的loadPage方法

<p @click="loadPage('Index')">Index</p>

需要用到路由跳转的页面如下

<template>
  <div>
    <p>这是index页面</p>
    <p @click="loadPage('Index')">Index</p>
    <p @click="loadPage('About')">About</p>
    <p @click="loadPage('Product')">Product</p>
  </div>
</template>