vue mixin 混入

如果在A组件和B组件中有相同的data属性、method方法等，可以将公共部分抽离出来，这就是mixin的作用

A组件：

<template>
  <div>
    <p>{{ aData }}</p>
    <p>{{ commonData }}</p>
    <button @click="aMethod">aMethod</button>
    <button @click="commonMethod">commonMethod</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      aData: '组件A的数据',
      commonData: '公共的数据'
    }
  },
  methods: {
    aMethod() {
      console.log('A的方法')
    },
    commonMethod() {
      console.log('公共的方法')
    }
  },
  mounted() {
    console.log('A-mounted')
    console.log('公共的mounted')
  }
}
</script>

B组件：

<template>
  <div>
    <p>{{ bData }}</p>
    <p>{{ commonData }}</p>
    <button @click="bMethod">bMethod</button>
    <button @click="commonMethod">commonMethod</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bData: '组件B的数据',
      commonData: '公共的数据'
    }
  },
  methods: {
    bMethod() {
      console.log('B的方法')
    },
    commonMethod() {
      console.log('公共的方法')
    }
  },
  mounted() {
    console.log('B-mounted')
    console.log('公共的mounted')
  }
}
</script>

可以看到，A、B组件中的commonData属性、commonMethod方法、mounted中打印的语句都可以抽出来：

在src下新建mixin/index.js：

export default {
  data() {
    return {
      commonData: '公共的数据'
    }
  },
  methods: {
    commonMethod() {
      console.log('公共的方法')
    }
  },
  mounted() {
    console.log('公共的mounted')
  }
}

在A组件中引入mixin，此时将公共部分的内容删除和原来的结果一样：

<template>
  <div>
    <p>{{ aData }}</p>
    <p>{{ commonData }}</p>
    <button @click="aMethod">aMethod</button>
    <button @click="commonMethod">commonMethod</button>
  </div>
</template>
<script>
import mixin from '../mixin'
export default {
  data() {
    return {
      aData: '组件A的数据'
    }
  },
  methods: {
    aMethod() {
      console.log('A的方法')
    }
  },
  mounted() {
    console.log('A-mounted')
  },
  mixins: [mixin]
}
</script>

B组件中同理，但是如果说B组件中和mixin传来的有相同数据，B组件中的数据优先级高：

<template>
  <div>
    <p>{{ bData }}</p>
    <p>{{ commonData }}</p>
    <button @click="bMethod">bMethod</button>
    <button @click="commonMethod">commonMethod</button>
  </div>
</template>
<script>
import mixin from '../mixin'
export default {
  data() {
    return {
      bData: '组件B的数据',
      commonData: '公共的数据11'
    }
  },
  methods: {
    bMethod() {
      console.log('B的方法')
    },
    commonMethod() {
      console.log('公共的方法11')
    }
  },
  mounted() {
    console.log('B-mounted')
    console.log('公共的mounted11')
  },
  mixins: [mixin]
}
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

通过mixins引入组件后，会给当前组件额外扩展一些属性和方法，简单的说就是给组件额外添加了一个BUFF

 

    场景：封装插件的时候用mixin

 

    mixin----全局使用

    mixins----局部使用

 

    步骤：

        ①utils下新建mixin.js：

            export default {
                // new Vue()中的配置项都可以在这里加
                data(){
                    return{
                        title:"我是额外提供的一个属性"
                    }
                },
                created() {
                    console.log("我是一个buff")
                }
            }

        ②App.vue中引入：

            import Mixin from "./utils/mixin.js";

        ③添加mixins属性：

            mixins:[Mixin],

 

        此时在created中就多一个console.log打印，在App.vue页面可以直接使用title属性，就和写在自己的data中一样。