纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue之mixin的使用 详解vue之mixin的使用

不求人0   2021-11-25 我要评论
想了解详解vue之mixin的使用的相关内容吗,不求人0在本文为您仔细讲解vue之mixin的使用的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue mixin,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>

总结

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


相关文章

猜您喜欢

  • v-for中的:key VUE v-for中的:key详解

    想了解VUE v-for中的:key详解的相关内容吗,谷歌玩家在本文为您仔细讲解v-for中的:key的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue v-for,v-for :key,下面大家一起来学习吧。..
  • OpenCV 对比度亮度 去水印 OpenCV利用对比度亮度变换实现水印去除

    想了解OpenCV利用对比度亮度变换实现水印去除的相关内容吗,ColorSpace在本文为您仔细讲解OpenCV对比度亮度去水印的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:OpenCV去水印,OpenCV对比度亮度去水印,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.Soft111.com 【纯净下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式