mixin混入

最新推荐文章于 2023-04-23 23:49:55 发布

沁沁酱

最新推荐文章于 2023-04-23 23:49:55 发布

阅读量291

点赞数

文章标签： Vue mixin 数据共享访问时间混入对象

本文链接：https://blog.csdn.net/weixin_58678797/article/details/121655198

版权

1.mixin是一个对象,可以将这个对象混入到组件中.
2.组件中的选项都可以在mixin对象中声明

作用:
将组件中共享的数据一般存放在mixin中,

比如：你的项目都做好了，（组件都已经完成了），需求：我关心组件中的访问时间

vMixins.vue

<template>
  <div class="box">
      <h5>mixin:混入</h5>

      <v-a></v-a>
  </div>
</template>

<script>

import vA from './vA.vue'

import mixinsa from './mixins'

export default {
  components:{
    vA
  },
  data(){
    return {
      username:'混入中的username'
    }
  },
  mixins:[ mixinsa ], //植入混入对象
  // mounted(){
  //   console.log(this.accesstime,'vMixins.vue')
  // }
}
</script>

<style>

</style>

mixins.js

/*
    1. 创建混入文件
    会导出一个对象
        这个对象参考组件中的对象即可
*/ 

export default {
    data(){
        return {
            accesstime: new Date().toLocaleDateString() + new Date().toLocaleTimeString()
        }
    },
    mounted(){
        console.log(this.accesstime,'vMixins.vue')
      }
}