Vue Mixin实例

1、什么是Mixin

官网解释：Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。
当多个页面需要用到同一方法、数据时，可以把它们抽取出来，放到mixin中

2、应用实例

混合方法isShowBackTop

export const isShowBackTop = {
    data() {
        return {
            isShowBackTop: false,
        }
    },
    methods: {
        backTopClick() {
   
                console.log("回到顶部")
        },
    },
}

test.vue

<template>
  <div class="">
          <div class="box">
          </div>
        <back-top @click.native="backTopClick" v-show="isShowBackTop" />
  </div>
</template>

<script>
import BackTop from "components/content/backTop/BackTop";

import {isShowBackTop} from '@/common/mixin' //导入混入中的代码

export default {
  name:"",
  components: {
      BackTop,
  },
  data() {
    return {
    };
  },
//   混入
  mixins:[isShowBackTop],
   mounted() {
    //    监听下拉条滚动
        window.addEventListener('scroll', this.handleScroll)
 },
 methods: {
        handleScroll() {
    this.isShowBackTop=true;
        }
 }

};
</script>
<style scoped>
.box{
    height: 600px;
    width: 100%;
    /* background-color: green; */
}
</style>

打印vue实例


如有错误请指出
引用：https://v3.cn.vuejs.org/guide/mixins.html#基础
官网vue.js mixin基础