vue中mixins的理解及应用

混入定义：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
应用场景：在项目中，如果我们需要提取公用的数据或者通用的方法，并且这些数据与方法不需要组件间进行维护，就可以使用mixins

1.方法的复用

在借助mixins之前，在两个不同的组件的组件中调用foo方法，需要重复定义，倘若方法比较复杂，代码将更加冗余。若借助mixins，则变得十分简单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="vm">
    <component-a></component-a>
    <component-b></component-b>
</div>
<script src="vue.js"></script>
<script>
    let mixin = {
      methods: {
        foo(){
              console.log('mixin foo()');
        }
      }

    }
    Vue.component('component-a',{
      template:`<div><button @click="foo">componentA</button></div>`,
      methods:{
          // foo(){
          //     console.log('componentA foo()')
          // }
      },
      mixins:[mixin]
  })

  Vue.component('component-b',{
      template:`<div><button @click="foo">componentB</button></div>`,
      methods:{
          // foo(){
          //     console.log('componentB foo()'+this.msg)
          // }
      },
      mixins:[mixin]
  })
    var app = new Vue({
        el:"#vm",
        data:{
        },
        methods:{
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述

2.Mixins定义共用的变量

Mixins可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响

如下图所示，点击componentA,加到13，在点击componentB却还是从10开始加
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="vm">
    <component-a></component-a>
    <component-b></component-b>
</div>
<script src="vue.js"></script>
<script>
    let mixin = {
      data() {
          return {
            msg: 10
          }
      },
      methods: {
        foo(){
              console.log('mixin foo()'+this.msg++)
        }
      }

    }
    Vue.component('component-a',{
      template:`<div><button @click="foo">componentA</button>{{msg}}</div>`,
      methods:{
      },
      mixins:[mixin]
  })

  Vue.component('component-b',{
      template:`<div><button @click="foo">componentB</button>{{msg}}</div>`,
      methods:{
      },
      mixins:[mixin]
  })
    var app = new Vue({
        el:"#vm",
        data:{
        },
        methods:{
        }
    })
</script>
</body>
</html>

3.方法的覆盖

如果在引用mixins的同时，在组件中重复定义相同的方法，则mixins中的方法会被覆盖。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="vm">
    <component-a></component-a>
    <component-b></component-b>
</div>
<script src="vue.js"></script>
<script>
    let mixin = {
      methods: {
        foo(){
              console.log('mixin foo()');
        }
      }

    }
    Vue.component('component-a',{
      template:`<div><button @click="foo">componentA</button></div>`,
      methods:{
          // foo(){
          //     console.log('componentA foo()')
          // }
      },
      mixins:[mixin]
  })

  Vue.component('component-b',{
      template:`<div><button @click="foo">componentB</button></div>`,
      methods:{
          foo(){
              console.log('componentB foo()'+this.msg)
          }
      },
      mixins:[mixin]
  })
    var app = new Vue({
        el:"#vm",
        data:{
        },
        methods:{
        }
    })
</script>
</body>
</html>

在这里插入图片描述

4.合并生命周期

如果在引用mixins定义created,mounted等，就会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用

<!--
 * @Descripttion:
 * @version:
 * @Author: fengyang
 * @Date: 2021-07-30 21:08:12
 * @LastEditors: fengyang
 * @LastEditTime: 2021-07-30 21:42:37
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--
    前言：在借助mixins之前，在两个不同的组件的组件中调用foo方法，需要重复定义，倘若方法比较复杂，代码将更加冗余。若借助mixins，则变得十分简单

    混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。


  -->
  <div id="vm">
    <component-a></component-a>
    <component-b></component-b>
</div>
<script src="vue.js"></script>
<script>
    let mixin = {
      created() {
        console.log('mixin say hi')//先输出
      },
      data() {
          return {
            msg: 10
          }
      },
      methods: {
        foo(){
              console.log('mixin foo()'+this.msg++)
        }
      }

    }
    Vue.component('component-a',{
      template:`<div><button @click="foo">componentA</button>{{msg}}</div>`,
      created() {
        console.log('componentA say hi')//后输出
      },
      methods:{
          // foo(){
          //     console.log('componentA foo()')
          // }
      },
      mixins:[mixin]
  })

  Vue.component('component-b',{
      template:`<div><button @click="foo">componentB</button>{{msg}}</div>`,
      methods:{
          // foo(){
          //     console.log('componentB foo()'+this.msg)
          // }
      },
      created() {
        console.log('componentB say hi')//后输出
      },
      mixins:[mixin]
  })
    var app = new Vue({
        el:"#vm",
        data:{
        },
        methods:{
        }
    })
</script>
</body>
</html>

在这里插入图片描述

原文链接：https://blog.csdn.net/atu1111/article/details/119256393