vue mixin和extends的使用

全局使用场景：所有子组件内部都与要某一个state、computed或者某个方法时,甚至在所有子组件某个生命周期内都需要执行一个一样功能时，都可用全局mixin；

相同生命周期函数会先运行mixin内部的钩子函数，然后再运行组件内部的钩子函数，对于state、computed或者某个方法时，组件内部的会覆盖mixin内部的定义的
全局注入步骤：
　　首先新建一个mixin.js文件：

import { mapGetters } from 'vuex'

// export const Mixin = {
export default{
  data(){
    return {
        navChildStatusOne: 1
    }
  },
  computed: {
    ...mapGetters([
      'navChildStatus'
    ]),
    pageMainLeft() {
      return this.navChildStatus ? '' : 'page-main-left'
    }
  },
  methods: {
      getUserlist(){
          console.log('from Mixin')
      }
  }
}

然后再mian.js页面引入

import mixins from '@/common/js/mixin'

然后注册

Vue.mixin(mixins)

使用： 
在所有组件内部都可调取内部的方法和状态：

mounted() {
    this.navChildStatusOne
    this.getUserlist()
},

引用顺序同全局一样

局部注入步骤：
　　首先定义一个混入对象，然后混入对象混入到当前的组件中：
　　

import mixins from '@/common/js/mixin'
    export default{
              mixins: [mixins],
        }

 

 

extends: 相当于复制了一个组件，在组件内部可以定义新的状态和方法，组件内部同名的方法或者state会覆盖extends组件里面的

<script>
    import dtl from './question-dtl.vue'
    export default{
        name: 'extendsss',
        extends: dtl,
        mounted(){
            this.breadcrumbs = [
                { name: '试题详情-试题详情' }
            ]
            this.GetQuestionBasicsInfo()
            this.GetQuestionInfo()
        },
        methods: {
            GetQuestionBasicsInfo(){
                
            },
            GetQuestionInfo(){
                
            }
        }
    }
</script>