详解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删除html内容的标签样式实例

    vue删除html内容的标签样式实例

    今天小编就为大家分享一篇vue删除html内容的标签样式实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 基于Vue CSR的微前端实现方案实践

    基于Vue CSR的微前端实现方案实践

    这篇文章主要介绍了基于Vue CSR的微前端实现方案实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 如何实现一个简易版的vuex持久化工具

    如何实现一个简易版的vuex持久化工具

    这篇文章主要介绍了实现一个简易版的vuex持久化工具,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 基于Vue框架vux组件库实现上拉刷新功能

    基于Vue框架vux组件库实现上拉刷新功能

    这篇文章主要为大家详细介绍了基于Vue框架vux组件库实现上拉刷新功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vuecli3.x中轻松4步带你使用tinymce的步骤

    vuecli3.x中轻松4步带你使用tinymce的步骤

    这篇文章主要介绍了vuecli3.x中轻松4步带你使用tinymce的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue-router权限控制(简单方式)

    vue-router权限控制(简单方式)

    这篇文章主要介绍了vue-router权限控制(简单方式),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 在antd Form表单中select设置初始值操作

    在antd Form表单中select设置初始值操作

    这篇文章主要介绍了在antd Form表单中select设置初始值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue项目中做编辑功能传递数据时遇到问题的解决方法

    vue项目中做编辑功能传递数据时遇到问题的解决方法

    这篇文章主要介绍了vue项目中做编辑功能传递数据时遇到问题的解决方法,vue父组件向子组件传递数据的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue el-upload上传文件的示例代码

    vue el-upload上传文件的示例代码

    这篇文章主要介绍了vue el-upload上传文件的示例代码,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12
  • vue 中filter的多种用法

    vue 中filter的多种用法

    这篇文章主要介绍了vue 中filter的多种用法,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2018-04-04

最新评论