1.混入

局部混入

/* 把公共的内容放在mixinsA.js文件中 */

export default{

    data(){

        return{

            msg:'vue初始化完毕'

        }

    },

    created() {

        console.log(this.msg);

    },

    methods: {

        fn(){

            alert(this.msg)

            console.log('mixins ``');

        }

    },

APP页面导入局部

import mixinsA from '@/mixins/mixinsA'

export default {

  name:'App',

  /* 混入对象的钩子将在组件自身钩子之前调用 */

  mixins:[mixinsA],

  methods:{

    /* 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先 */

    fn(){

      alert('app init')

    }

  }

}

全局混入，慎用

Vue.mixin({

  created:function(){

    console.log('全局init..');

  }

})

/* 用了全局混入会执行4遍，因为加载的时候会执行一遍main.js里面全局混入的内容，有三个页面需要使用，三个vue页面分别执行一遍 */

2.Vue的swiper轮播步骤：

第一步：

安装依赖npm i swiper@5 --save

npm i vue-awesome-swiper@3 --save

\

第二步：

全局安装

在main.js里面操作：

import VueAwesomeSwiper from 'vue-awesome-swiper'

\

/* 在node_modules里面找到swiper文件夹里面的css文件 */

import 'swiper/css/swiper.css'

\

/* 使用Vue.use来注册一个轮播图插件 */

Vue.use(VueAwesomeSwiper)

★ 复制下面的代码在vscode中会出现word格式黄色空格，

需要自己删掉，建议手敲下面的代码

第三步：

在自己的组件文件夹中新建一个轮播图组件MySwiper.vue：

并复制以下代码到你的组件中：

\

.swiper-container {   width: 500px;   height: 400px;   border: 1px solid red; }

\

把组件引用到app.vue文件中去：