脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vuecli局部混入mixin和全局混入mixin

vue cli 局部混入mixin和全局混入mixin的过程

 更新时间：2022年05月24日 10:42:39   作者：每一天，每一步  
这篇文章主要介绍了vue cli 局部混入mixin和全局混入mixin的过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

局部混入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，则均会执行。

mixins的使用方法和注意点

混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。

1. 把Mixin混入到当前的组件中，方法和参数在各组件中不共享

export const myMixin = {
    data() {
        return {
            number: 1,
            data: {
                str: 'hello world'
            }
        }
    },
}

在模版Admin， 和Docs中

<template>
  <span>Admin: {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
    mixins: [myMixin],
    created() {
        this.number ++;
        this.data.str = '=========== i am a new str'
    }
}
</script>
<template>
  <span>Docs {{number}} {{data.aa}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
    mixins: [myMixin]
}
</script>

页面显示, admin显示的最新修改的number和str值，而Docs中显示的是mixin默认值，并没有被修改

在这里插入图片描述

在这里插入图片描述

所以我们得出结论，mixin中data的值各个组件中不共享。

2. 值作为对象，如methods， components等，选项会被合并。如果有冲突则组件覆盖mixin中对象

例如mixin中定义method

export const myMixin = {
    data() {
        return {
            number: 1,
            data: {
                str: 'hello world'
            }
        }
    },
    methods: {
        one() {
            console.log('============ one');
        },
        two() {
            console.log('============ two');
        }
    }
}

Mixin在Admin 和 Docs 模版中，分别调用，如下

// Admin
<template>
  <span>Admin: {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
    mixins: [myMixin],
    created() {
        this.self();
        this.one();
        this.two();
    },
    methods: {
        self() {
            console.log('============ admin self');
        },
        two() {
            console.log('============ admin func_two');
        }
    }
}
</script>
// Docs
<template>
  <span>Docs {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
    mixins: [myMixin],
    created() {
        this.one();
        this.two();
    },
}
</script>

在控制台打印结果如下

// Admin

在这里插入图片描述

// Docs

在这里插入图片描述

我们可以看到admin 中方法 function two与 Mixin 中function two，名称是相同的，所以在相同发生冲突的时候，组件的方法将会覆盖Mixin中的方法。

3. 值为函数的选项，如created,mounted等，就会被合并调用，Mixin里的hook函数在组件里的hook函数之前调用

比如在Mixin中定义

export const myMixin = {
    data() {
        return {
            number: 1,
            data: {
                str: 'hello world'
            }
        }
    },
    created() {
    	console.log('============= mixin created');
        this.hello();
    },
    methods: {
        hello() {
            console.log('============== hello');
        },
        one() {
            console.log('============ one');
        },
        two() {
            console.log('============ two');
        }
    }
}

在Admin 和Docs中应用

// Admin
<template>
  <span>Admin: {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
    mixins: [myMixin],
    created() {
        console.log('========== admin created');
        this.number ++;
        this.data.str = '=========== i am a new str'
        this.self();
        this.one();
        this.two();
    },
    methods: {
        self() {
            console.log('============ admin self');
        },
        two() {
            console.log('============ admin func_two');
        }
    }
}
</script>
// Docs
<template>
  <span>Docs {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
    mixins: [myMixin],
    created() {
         console.log('========== docs created');
        this.one();
        this.two();
    },
}
</script>

我们在控制台可以看到

Admin.vue 是先调用Mixin中create及方法，在调用Admin中Create中方法的

在这里插入图片描述

同理，Docs.vue 中也是如此

在这里插入图片描述

所以我们得出结论

值为函数的选项，如created,mounted等，就会被合并调用，Mixin里的hook函数在组件里的hook函数之前调用。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 

您可能感兴趣的文章:

相关文章

  • vue中data里面的数据相互使用方式

    vue中data里面的数据相互使用方式

    这篇文章主要介绍了vue中data里面的数据相互使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • vue2 拖动排序 vuedraggable组件的实现

    vue2 拖动排序 vuedraggable组件的实现

    这篇文章主要介绍了vue2 拖动排序 vuedraggable组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 在vue项目中,将juery设置为全局变量的方法

    在vue项目中,将juery设置为全局变量的方法

    今天小编就为大家分享一篇在vue项目中,将juery设置为全局变量的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue-cli 为项目设置别名的方法

    vue-cli 为项目设置别名的方法

    这篇文章主要介绍了vue-cli 为项目设置别名的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue3使用echarts tree高度自适应支持滚动查看功能

    Vue3使用echarts tree高度自适应支持滚动查看功能

    这篇文章主要介绍了Vue3使用echarts tree高度自适应支持滚动查看功能,文章同通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2024-06-06
  • element ui table（表格）实现点击一行展开功能

    element ui table（表格）实现点击一行展开功能

    这篇文章主要给大家介绍了关于element ui table（表格）实现点击一行展开功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • vue中的依赖注入provide和inject简单介绍

    vue中的依赖注入provide和inject简单介绍

    这篇文章主要介绍了vue中的依赖注入provide和inject简单介绍,provide 选项允许我们指定我们想要提供给后代组件的数据/方法，本文通过组价刷新的案列给大家详细讲解，需要的朋友可以参考下
    2022-11-11
  • 解决vue表单为空也能提交的问题

    解决vue表单为空也能提交的问题

    这篇文章主要介绍了解决vue表单为空也能提交的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • Element中el-select下拉框实现选中图标并回显图标

    Element中el-select下拉框实现选中图标并回显图标

    本文主要介绍了Element中el-select下拉框实现选中图标并回显图标，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • VUE2 前端实现 静态二级省市联动选择select的示例

    VUE2 前端实现 静态二级省市联动选择select的示例

    下面小编就为大家分享一篇VUE2 前端实现 静态二级省市联动选择select的示例。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论