Vue之mixin混入詳解
?
局部混入
<template> <div> <h2 @click="showName">學(xué)生姓名:{{name}}</h2> <h2>學(xué)生性別:{{sex}}</h2> </div> </template> <script> //引入一個(gè)混合 import { hunhe,hunhe2 } from '../mixin' export default { name: 'Student', data() { return { name: '張三', sex: '男' } }, mixins: [hunhe,hunhe2] } </script>
export const hunhe = { methods: { showName() { alert(this.name) } } } export const hunhe2 = { data() { return { x: 100, y: 200 } } }
全局混入
import { hunhe, hunhe2 } from './mixin' Vue.mixin(hunhe) Vue.mixin(hunhe2)
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue引入新版 vue-awesome-swiper插件填坑問(wèn)題
這篇文章主要介紹了vue引入新版 vue-awesome-swiper插件填坑問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01vue項(xiàng)目中添加electron的詳細(xì)代碼
這篇文章通過(guò)實(shí)例代碼給大家介紹了vue項(xiàng)目中添加electron的方法,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-11-11關(guān)于vue-tree-chart簡(jiǎn)單的使用
這篇文章主要介紹了關(guān)于vue-tree-chart簡(jiǎn)單的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue移動(dòng)端使用appClound拉起支付寶支付的實(shí)現(xiàn)方法
這篇文章主要介紹了vue移動(dòng)端使用appClound拉起支付寶支付的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11一篇文章教你簡(jiǎn)單使用Vue的watch偵聽(tīng)器
這篇文章主要為大家介紹了Vue watch偵聽(tīng)器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-12-12vant/vue手機(jī)端長(zhǎng)按事件以及禁止長(zhǎng)按彈出菜單實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vant/vue手機(jī)端長(zhǎng)按事件以及禁止長(zhǎng)按彈出菜單實(shí)現(xiàn)方法詳解,需要的朋友可以參考下2022-12-12關(guān)于Element上傳組件beforeUpload上傳前限制失效問(wèn)題
這篇文章主要介紹了Element上傳組件beforeUpload上傳前限制失效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03