vue cli 局部混入mixin和全局混入mixin

应用场景：

两个组件，都需要用到同一个点击事件方法，此时使用mixin混入，可以很好的实现代码的复用。

在vue cli搭建的项目中，src目录下新建mixin.js文件：

// 对外暴露mixin对象
export const mixin = {
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    click() {
      alert('你点我了')
    }
  }
}

export const mixin2 = {
  mounted() {
    console.log('mounted');
  }
}

App.vue中引入两个组件Student和School：

<template>
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
import School from './components/School'
import Student from './components/Student'

export default {
  name: 'App',
  components: {
    School,
    Student
  }
}
</script>

<style>

</style>

1、局部混入mixin

Student和School两个组件中点击第一行的文字会弹出提示：‘你点我了’，组件中分别引入mixin混入，

Student.vue:

<template>
  <div>
    <p @click="click">学生姓名：{
   
   {name}}</p>
    <p>学生年龄：{
   
   {age}}</p>
  </div>
</template>

<script>
import {mixin} from '../mixin'

export default {
  name: 'Student',
  data() {
    return {
      name: 'Tom',
      age: 18
    }
  },
  mixins: [mixin]
}
</script>

<style>

</style>

School.vue:

<template>
  <div>
    <p @click="click">学校名称：{
   
   {name}}</p>
    <p>学校地址：{
   
   {address}}</p>
  </div>
</template>

<script>
import {mixin} from '../mixin'

export default {
  name: 'Student',
  data() {
    return {
      name: 'zz',
      address: 'bj'
    }
  },
  mixins: [mixin]
}
</script>

<style>

</style>

2、全局混入mixin

在main.js中引入暴露的mixin对象：

import {mixin} from './mixin'

// 引入多个mixin
import {mixin, mixin2} from './mixin'

// 全局混入
Vue.mixin(mixin)

// Vue.mixin(mixin2)

页面效果：

mixin对象中的msg也会混入到Vue实例和组件中。

如果想要同时引入两个混入，则使用下面的引入方式多引入一个变量即可：

import {mixin, mixin2} from '../mixin'

如果组件和混入mixin中同时有钩子函数如mounted，则均会执行。

vue cli 局部混入mixin和全局混入mixin

猜你喜欢