Vue中如何使用mixin？什么情况用mixin

mixin--混入

mixin是vue组件复用功能的技术之一 他可以把多个组件中重复出现的属性和方法进行封装方便多次调用

举个例子：比如有个方法buttonClick

 methods:{
       buttonClick(){
            console.log("封装的方法")
        }
    }

这个方法需要在 A  B C D 等多个页面用。不可能写四遍把？那肯定不太好了。则用混入即可

一、怎么用？？？？？

混入就是把组件多次使用的属性和方法等内容进行封装

首先新建一个mixins的文件夹用来容纳混入的封装，里面比如建一个index.js文件

在index.js里面写封装的方法或者变量或侦听或等等。。。。。

export let demo={
	//要封装方法写方法
    methods:{
        buttonClick(){
            console.log("封装的方法")
        }
    },
    //要封装变量写变量
    data(){
        return {
			text:"封装的变量"
        }
    },
    //要封装计算属性写计算属性
    computed:{

    },
    //灵活去用
}

 二、调用

第一种局部混入-------mixins （在哪用？在哪写，比如我在home页面用，则写）

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- 3.就可以直接想怎么用就怎么用混入的内容 -->
    <button @click="buttonClick()">点我调用混入的方法</button>
      //text直接用就行
    <div>{{text}}</div>
  </div>
</template>
<script>

// 1.引用混入
import {demo} from "@/mixins"
export default {
// 2.调用混入（写在methods平级）
  mixins:[demo]
}
</script>

第二种全局混入--------mixin（慎用可能会造成代码的污染 ）

全局后则直接用即可不需要再去引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 1.引用mixin
import {demo} from "./mixins"
// 2.配置全局混入
Vue.mixin(demo)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')