vue的mixins

#vue-mixins

知识点：

mixins

作用：

mixins功能类似组件功能

组件可以抽离页面中的结构、逻辑、样式，形成单独的文件，方便维护、复用，减少冗余代码

mixins可以抽离出当前组件中的变量、方法、生命周期等，方便维护、复用，减少冗余代码

使用：

1.定义：mixins就是一个固定格式的对象，一般单独存在于js文件中

let mixins = {
    data(){
        return {
            mixinName:'mixin'
        }
    },
    methods: {},
    computed: {},
    created(){
        console.log('mixins');
    },
    mounted() {}  
}
export {mixins}

2.使用：

全局混入使用：

// main.js
import {mixins} from '@/mixins/index.js'
Vue.mixin(mixins)
// 全局任意组件
<template>
  <div>
      {{mixinName}}
      {{appName}}
      组件会依次执行生命周期中的mixin、app
  </div>
</template>

局部混入使用：

<template>
  <div>
      {{mixinName}}
      {{appName}}
      组件会依次执行生命周期中的mixin、app
  </div>
</template>

<script>
import { mixins } from '@/mixins/index.js'
export default {
  mixins:[mixins],
  created(){
    console.log('app');
  },
  data(){
    return {
      appName:'app',
    }
  }
}
</script>

3. 注意：

• 无论是全局、局部混入后，混入内容都是独立的，相互不干扰

• 混入后，命名冲突问题（官网代码）

  // data、methdos 数据、方法合并，相同内容已当前组件为准
  // 补充：生命周期不冲突都执行，优先mixins的生命周期
  var mixin = {
    data: function () {
      return {
        message: 'hello',
        foo: 'abc'
      }
    }
  }
  
  new Vue({
    mixins: [mixin],
    data: function () {
      return {
        message: 'goodbye',
        bar: 'def'
      }
    },
    created: function () {
      console.log(this.$data)
      // => { message: "goodbye", foo: "abc", bar: "def" }
    }
  })
  

  var mixin = {
    methods: {
      foo: function () {
        console.log('foo')
      },
      conflicting: function () {
        console.log('from mixin')
      }
    }
  }
  
  var vm = new Vue({
    mixins: [mixin],
    methods: {
      bar: function () {
        console.log('bar')
      },
      conflicting: function () {
        console.log('from self')
      }
    }
  })
  
  vm.foo() // => "foo"
  vm.bar() // => "bar"
  vm.conflicting() // => "from self"