如何进行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>   </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>   </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>      </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>      </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中mixin的使用了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网行业资讯频道。