|
vue之mixin的使用 - 作用：在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了
- data数据的等访问原则：若是使用mixin的当前组件有该 data数据 或者 methods方法的话 直接运用的是当前组件的数据或者方法，否则的话直接继承mixin内部的数据与方法
- 注意点：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响
- 注意点2：mixin是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的data数据与方法等，可以理解为形成了一个新的组件
mixin之中的data数据访问
mixin / index.jsexport default { data () { return { msg: "我是mixin内的msg" } }, created () { }, mounted () { }, methods: { }}
Home.vue<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.jsexport 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>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注51zixue.net的更多内容!
下载地址:
Vue+SSM实现图片上传预览效果
VUE |
