vue中引入mixin具体步骤

以下的描述都是在vue脚手架中操作的

1.首先在assets文件夹中创建一个minxin.js

export const minxin = {
  data () {
    return {
      message: '师父',
      age: 22
    }
  },
  created () {
    this.gobeach()
  },
  methods: {
    gobeach () {
      console.log('萌二和阿呆去看日出')
    }
  }
}

2.创建一个组件 这里我写的是 detail.vue 组件

<template>
  <div>
    <h1>多多今年{{age}}岁了</h1>
  </div>
</template>

<script>
import { minxin } from '../assets/minxin.js' // 引入minixn
export default {
  mixins: [minxin], // 这里一定不要把单词写错 mixins：[引入的名字]
  data () {
    return {
      title: '萌二招财猫',
      age: 25  // minxin.js中是写的22 但是页面展示出来会是25 这是因为当 minxin.js中的属性和组件的属性重复时会使     用组件的
    }
  },
  created () {
   // 另外在控制台 还会看到打印一句  ‘萌二和阿呆去看日出’ 这是因为minxin.js中的方法属于这个组件了
    console.log(this.message) // “师父” 打印出来的是minxin中的data中的内容 
  }
}
</script>
<style scoped  lang="scss">
div {
  width: 100%;
  height: 800px;
  overflow: scroll;
}
</style>

结合1和2 可以看出 mixin 混入是挺简单的步骤 ，但是混入之后有一些特点还是要知道的
上面主要看出 mixin中的方法 和属性 组件中都可以用 当组件中的属性和它重复时 优先使用组件中的属性
接下来几个例子可以看看它其他的特点
3.minxin.js 中

export const minxin = {
  data () {
    return {
      obj: {
        like: 'eat',
        hate: '三观不合'
      },
      arr: [1, 2, 3, 4]
    }
  },
  created () {
    this.hello() // 当混入的组件中 也有这个方法时 执行的是当前混入组件中的方法
  },
  methods: {
    hello () {
      console.log('我是minxin中的方法哦')
    }
  }
}

4.detail.vue中

<template>
  <div>
    <h1>多多今年{{age}}岁了</h1>
  </div>
</template>

<script>
import { minxin } from '../assets/minxin.js' // 引入minixn
export default {
  mixins: [minxin],
  data () {
    return {
      obj: {
        name: '多多',
        like: '一切美好的事物'
      },
      arr: [2, 3, 4, 5, 6, 7, 8, 9]
    }
  },
  created () {
  this.hello()
    console.log(this.obj)  //  {hate: "三观不合",like: "一切美好的事物", name: "多多"}  把minxin.js中的obj和组件中的obj   合并了 重复的属性用组件的 
    console.log(this.arr) // [2, 3, 4, 5, 6, 7, 8, 9] // 直接用组件的
  },
  methods: {
    hello () {
      console.log('hello, 我是组件中的方法') // 打印两遍 'hello, 我是组件中的方法'  因为调用了两次 ， minxin.js中调用了一次 ，组件内部调用了一次
    }
  }
}
</script>
<style scoped  lang="scss">
div {
  width: 100%;
  height: 800px;
  overflow: scroll;
}
</style>

通过3和4可以看出
a: 如果minxin混入的参数相同 并且是基本数据类型的 话直接使用组件内部的替换
b: 如果minxin混入的参数相同 并且参数是对象的话 进行合并 重复的用组件内部的

5.minxin.js

export const minxin = {
  data () {
    return {
      message: '师父',
      age: 22
    }
  },
  created () {
     console.log('我是minxin中的打印哦') // 各打印各的不影响
  }
}

6.detail.vue

<template>
  <div>
    <h1>多多今年{{age}}岁了</h1>   // 页面中展示出来的是23 也就是++之后的数字
  </div>
</template>

<script>
import { minxin } from '../assets/minxin.js' // 引入minixn
export default {
  mixins: [minxin],
  data () {
    return {
      title: '萌二招财猫'
  },
  created () {
  this.age++
    console.log('我是组件中的打印哦') // 各打印各的 不影响
  }
}
</script>
<style scoped  lang="scss">
div {
  width: 100%;
  height: 800px;
  overflow: scroll;
}
</style>

7.detail2.vue

<template>
 <p>你好</p>
</template>
<script>
import { minxin } from '../assets/minxin.js' // 引入minixn
export default {
  mixins: [minxin],
  data () {
    return {}
  },
  created () {
  console.log(this.age)  // 22 还是一开始混入时minxin.js中 age的初始值
    this.hello()
  },
  methods: {
    hello () {
      console.log('我是我的组件哦')
    }
  }
}
</script>
<style scoped  lang="scss">
</style>

通过5和6 5和7的比较 可以发现当同一个mixin混入不同组件之后 就算参数被其中一个修改了，别的组件也不会修改 ，也就是可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。