详解vue之mixin的使用

更新时间：2021年11月25日 17:19:53 作者：不求人0

这篇文章主要为大家介绍了vue之mixin的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

vue之mixin的使用

作用：在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了
data数据的等访问原则：若是使用mixin的当前组件有该 data数据或者 methods方法的话直接运用的是当前组件的数据或者方法，否则的话直接继承mixin内部的数据与方法
注意点：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响
注意点2：mixin是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的data数据与方法等，可以理解为形成了一个新的组件

mixin之中的data数据访问

mixin / index.js

export default {
  data () {
    return {
      msg: "我是mixin内的msg"
    }
  },
  created () {
  },
  mounted () { },
  methods: {
  }
}

Home.vue

在Home组件中使用mixin

<template>
  <div>
    <div>home -- {{ msg }}</div> /* home修改的msg */
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "Home",
  mixins: [mixin],
  data() {
    return {    };
  },
  created() {
    // 拿mixin的data数据
    console.log("home打印一下", this.msg); //home打印一下 我是mixin内的msg
    // 修改mixin的data数据
    this.msg = "home修改的msg";
    console.log("home打印一下", this.msg); // home打印一下 home修改的msg
  },
  methods: {
  },
};
</script>
<style  lang="scss" scoped>
</style>

About2.vue

<template>
  <div>
    <div>about2 -- {{ msg }}</div> /*  about2修改的msg */
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "About2",
  mixins: [mixin],
  components: {},
  data() {
    return {
      msg: "本地的msg",
    };
  },
  created() {
    console.log("about2打印一下", this.msg); // 本地的msg
    this.msg = "about2修改的msg";
    console.log("about2打印一下", this.msg); // about2修改的msg
    // 最后页面 显示的 about2修改的msg 这个数据
  },
  methods: {
  },
};
</script>
<style  lang="scss" scoped>
</style>

mixin中的 methods方法和computed使用

mixin / index.js

export default {
  data () {
    return {
      msg: "我是mixin内的msg"
    }
  },
  created () { },
  mounted () { },
  computed: {
    UserName () {
      return "我是计算属性的UserName";
    },
  },
  methods: {
    tipMsg () {
      console.log("minxin内的tipMsg方法", this.msg);
    },
    tipInfo (info) {
      console.log("minxin内的tipInfo方法", info);
    }
  }
}

Home.vue

<template>
  <div>
    <div>home --- msg-{{ msg }} UserName-{{ UserName }}</div>
    /* home --- msg-home修改的msg UserName-我是计算属性的UserName */
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "Home",
  mixins: [mixin],
  components: {},
  data() {
    return {};
  },
  created() {
    // 拿mixin的data数据
    console.log("home打印一下", this.msg); //home打印一下 我是mixin内的msg
    // 修改mixin的data数据
    this.msg = "home修改的msg";
    console.log("home打印一下", this.msg); // home打印一下 home修改的msg
    // 调用mixin中的 tipMsg 方法
    this.tipMsg(); // minxin内的tipMsg方法 home修改的msg
    this.tipInfo("我是home的菜鸡info"); // minxin内的tipInfo方法 我是home的菜鸡info
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
</style>

About2.vue

<template>
  <div>
    <div>about2 -- {{ msg }} UserName-{{ UserName }}</div>
    /* about2 -- about2修改的msg UserName-我是计算属性的UserName */
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "About2",
  mixins: [mixin],
  components: {},
  data() {
    return {
      msg: "本地的msg",
    };
  },
  created() {
    console.log("about2打印一下", this.msg); // 本地的msg
    this.msg = "about2修改的msg";
    console.log("about2打印一下", this.msg); // about2修改的msg
    // 最后页面 显示的 about2修改的msg 这个数据
    this.tipMsg(); // 最后打印 -> 我是about2本地的tipMsg方法
    this.tipInfo(); // minxin内的tipInfo方法 undefined
  },
  methods: {
    tipMsg() {
      console.log("我是about2本地的tipMsg方法");
    },
  },
};
</script>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

Vue实现版本检测与升级提示
在现代Web应用开发中,版本检测与升级提示是提升用户体验的重要环节,本文将详细介绍如何在Vue应用中实现这一功能,有需要的小伙伴可以参考一下
2025-04-04
Vue3设计思想及响应式源码解析
这篇文章主要为大家介绍了Vue3设计思想及响应式源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
Vue中如何点击获取当前元素下标
这篇文章主要介绍了Vue中如何点击获取当前元素下标问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue router-link 默认a标签去除下划线的实现
这篇文章主要介绍了vue router-link 默认a标签去除下划线的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue Tab切换以及缓存页面处理的几种方式
这篇文章主要介绍了vue Tab切换以及缓存页面处理的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
使用vue点击li,获取当前点击li父辈元素的属性值方法
今天小编就为大家分享一篇使用vue点击li,获取当前点击li父辈元素的属性值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue3+vite+ts使用require.context问题
这篇文章主要介绍了vue3+vite+ts使用require.context问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue百度地图实现自定义弹框样式
这篇文章主要介绍了vue百度地图实现自定义弹框样式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue3中watch与watchEffect的区别
vue3 新增的 Composition API中的 watchEffect 和 watch都可在 setup() 函数中使用，本文重点介绍vue3中watch与watchEffect的区别，感兴趣的朋友一起看看吧
2023-02-02
Vue中的组件注册方法及注意事项
在Vue中，组件是构建页面的基本单位。通过组件化开发，可以提高代码的复用性和可维护性。组件的注册方法包括全局注册和局部注册两种方式。同时，需要注意组件名的命名规范、组件选项的定义方式、组件之间的通信等问题，以实现更好的组件复用和开发效率
2023-05-05