• vue混入(mixin)的详解

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

    1.钩子函数

    同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。

    1. var mixin = {
    2.   created: function () {
    3.     console.log('混入对象的钩子被调用')
    4.   }
    5. }
    6.  
    7. new Vue({
    8.   mixins: [mixin],
    9.   created: function () {
    10.     console.log('组件钩子被调用')
    11.   }
    12. })
    13. // => "混入对象的钩子被调用"
    14. // => "组件钩子被调用"

    2.数据对象合并

    1. <body>
    2.     <div id="app">div>
    3. body>
    4. <script src="./vue.js">script>
    5. <script>
    6.     var Mixins = {
    7.         data: {
    8.             msg: 'I am Mixins',
    9.             msg1: 'I am Mixins msg1'
    10.         },
    11.         created() {
    12.             console.log('我是组件中的变量：' + this.msg2)
    13.         }
    14.     }
    15.     new Vue({
    16.         mixins: [Mixins],
    17.         el: '#app',
    18.         data: {
    19.             msg: 'I am #app',
    20.             msg2: 'I am msg2'
    21.         },
    22.         created() {
    23.             console.log(this.msg)
    24.             console.log('我是混入对象中的变量：' + this.msg1)
    25.         }
    26.     })
    27.     
    28.     // 我是组件中的变量：I am msg2
    29.     // I am #app
    30.     // 我是混入对象中的变量：I am Mixins msg1
    31. script>
    32.

    3.普通方法合并

    当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对。

    1. <body>
    2.     <div id="app">div>
    3. body>
    4. <script src="./vue.js">script>
    5. <script>
    6.     var Mixins = {
    7.         methods: {
    8.             mixin: function() {
    9.                 console.log('Mixin')
    10.             },
    11.             mixinTwo: function () {
    12.                 console.log('MixinTwo')
    13.             }
    14.         }
    15.     }
    16.     new Vue({
    17.         el: '#app',
    18.         mixins: [Mixins],
    19.         methods: {
    20.             mixin: function () {
    21.                 console.log('#app')
    22.             }
    23.         },
    24.         mounted() {
    25.             this.mixin()
    26.             this.mixinTwo()
    27.         }
    28.     })
    29.     
    30.     // #app
    31.     // MixinTwo
    32. script>
    33.

    4.局部混入

    在componnets目录下新建mixins文件夹，并在mixins目录下创建一个mixin.js文件，代码如下：

    1. const mixin = {
    2.   data() {
    3.     return {
    4.       msg: "hello"
    5.     }
    6.   },
    7.   methods: {
    8.     mixinMethod() {
    9.       console.log(this.msg + ',这是mixin混入方法')
    10.     }
    11.   }
    12. }
    13. export default mixin;

    在需要的页面中引入：

    1. <template>
    2.     <div>{{msg}}div>
    3. template>
    4. <script>
    5. import mixin from '../mixins/mixin'
    6. export default {
    7.     mixins: [mixin],
    8.     data() {
    9.         return {
    10.         }
    11.     }
    12.     mounted() {
    13.         this.mixinMethod()
    14.     }
    15. }
    16.  
    17. // hello，这是mixin混入的方法
    18.

    5.全局混入

    在main.js加入以下代码

    1. Vue.mixin({
    2.   data() {
    3.     return {
    4.       msg: 'hello'
    5.     }
    6.   },
    7.   methods: {
    8.     mixinMethod() {
    9.       console.log(this.msg+'，这是mixin混入的方法')
    10.     }
    11.   }
    12. })

    在组件中直接引用：

    1. <template>
    2.     <div>{{msg}}div>
    3. template>
    4. <script>
    5. export default {
    6.     data() {
    7.         return {
    8.         }
    9.     }
    10.     mounted() {
    11.         this.mixinMethod()
    12.     }
    13. }
    14.  
    15. // hello，这是mixin混入的方法
    16. script>

    五、与vuex的区别

    　　很多同学可能看到这里会有一些疑问，这不就跟Vuex差不多嘛，其实不是的：

    　　mixin混入对象和Vuex的区别：

    1、Vuex是状态共享管理，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的；

    2、mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；

    3、mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；

    4、mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖；

    六、与父子组件的区别

    　　子组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，但本质上两者还是泾渭分明，相对独立。

    　　而mixins则是在引入组件之后，将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

    　　单纯组件引用：父组件 + 子组件 >>> 父组件 + 子组件

    　　mixins：父组件 + mixin组件 >>> new父组件

    　　mixin作用：多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

  • 相关阅读:
    brew对redis的使用
    第一季：18es与solr的区别【Java面试题】
    嵌入式-原码、补码，反码的存储
    Windows Server 2008 共享文件夹
    list模拟实现（15）
    【100天精通python】Day24：python 迭代器，生成器，修饰器应用详解与示例
    视频怎么批量压缩？5个好用的电脑软件和在线网站
    Linux安装Nexus（图文解说详细版）
    JAVA设计模式-适配器模式
    Java安装教程：如何安装java环境？
  • 原文地址：https://blog.csdn.net/qq_47443027/article/details/126319324