• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

详解vue之mixin的使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue+SSM实现图片上传预览效果发布时间:2022-02-05
下一篇:
VUE v-for中的:key详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap