詳解vue之mixin的使用
更新時間:2021年11月25日 17:19:53 作者:不求人0
這篇文章主要為大家介紹了vue之mixin的使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
vue之mixin的使用
- 作用:在引入組件之后,則是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后,父組件的各種屬性方法都被擴(kuò)充了
- data數(shù)據(jù)的等訪問原則:若是使用mixin的當(dāng)前組件有該 data數(shù)據(jù) 或者 methods方法的話 直接運(yùn)用的是當(dāng)前組件的數(shù)據(jù)或者方法,否則的話直接繼承mixin內(nèi)部的數(shù)據(jù)與方法
- 注意點:可以定義共用的變量,在每個組件中使用,引入組件中之后,各個變量是相互獨立的,值的修改在組件中不會相互影響
- 注意點2:mixin是在引入組件之后與組件中的對象和方法進(jìn)行合并,相當(dāng)于擴(kuò)展了父組件的data數(shù)據(jù)與方法等,可以理解為形成了一個新的組件
mixin之中的data數(shù)據(jù)訪問
mixin / index.js
export default { data () { return { msg: "我是mixin內(nèi)的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數(shù)據(jù) console.log("home打印一下", this.msg); //home打印一下 我是mixin內(nèi)的msg // 修改mixin的data數(shù)據(jù) 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 這個數(shù)據(jù) }, methods: { }, }; </script> <style lang="scss" scoped> </style>
mixin中的 methods方法和computed使用
mixin / index.js
export default { data () { return { msg: "我是mixin內(nèi)的msg" } }, created () { }, mounted () { }, computed: { UserName () { return "我是計算屬性的UserName"; }, }, methods: { tipMsg () { console.log("minxin內(nèi)的tipMsg方法", this.msg); }, tipInfo (info) { console.log("minxin內(nèi)的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數(shù)據(jù) console.log("home打印一下", this.msg); //home打印一下 我是mixin內(nèi)的msg // 修改mixin的data數(shù)據(jù) this.msg = "home修改的msg"; console.log("home打印一下", this.msg); // home打印一下 home修改的msg // 調(diào)用mixin中的 tipMsg 方法 this.tipMsg(); // minxin內(nèi)的tipMsg方法 home修改的msg this.tipInfo("我是home的菜雞info"); // minxin內(nèi)的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 這個數(shù)據(jù) this.tipMsg(); // 最后打印 -> 我是about2本地的tipMsg方法 this.tipInfo(); // minxin內(nèi)的tipInfo方法 undefined }, methods: { tipMsg() { console.log("我是about2本地的tipMsg方法"); }, }, }; </script>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue element 關(guān)閉當(dāng)前tab 跳轉(zhuǎn)到上一路由操作
這篇文章主要介紹了vue element 關(guān)閉當(dāng)前tab 跳轉(zhuǎn)到上一路由操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07簡單的vue-resourse獲取json并應(yīng)用到模板示例
本篇文章主要介紹了簡單的vue-resourse獲取json并應(yīng)用到模板示例,非常具有實用價值,需要的朋友可以參考下。2017-02-02Vue手把手教你擼一個 beforeEnter 鉤子函數(shù)
這篇文章主要介紹了Vue手把手教你擼一個 beforeEnter 鉤子函數(shù),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04iview實現(xiàn)select tree樹形下拉框的示例代碼
這篇文章主要介紹了iview實現(xiàn)select tree樹形下拉框的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12Element-ui中元素滾動時el-option超出元素區(qū)域的問題
這篇文章主要介紹了Element-ui中元素滾動時el-option超出元素區(qū)域的問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05