这期内容当中小编将会给大家带来有关如何进行vue中mixin的使用，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
作用：在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了
data数据的等访问原则：若是使用mixin的当前组件有该 data数据 或者 methods方法的话 直接运用的是当前组件的数据或者方法，否则的话直接继承mixin内部的数据与方法
注意点：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响
注意点2：mixin是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的data数据与方法等，可以理解为形成了一个新的组件
计算
安全
数据库
网络和加速
企业服务
export default {
data () {
return {
msg: "我是mixin内的msg"
}
},
created () {
},
mounted () { },
methods: {
}
}在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><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>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);
}
}
}<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><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中mixin的使用了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
