詳解TypeScript+Vue 插件 vue-class-component的使用總結(jié)
首先 下載
npm install vue-class-component vue-property-decorator --save-dev
一梭子直接干;
其次,咱來(lái)說說它們的區(qū)別與聯(lián)系:
vue-property-decorator社區(qū)出品;vue-class-component官方出品
vue-class-component提供了Vue、Component等;
vue-property-decorator深度依賴了vue-class-component,拓展出了更多操作符:@Prop、@Emit、@Inject、@Model、@Provide、@Watch;
開發(fā)時(shí)正常引入vue-property-decorator就行
引入后寫vue代碼就是如此,
import {Component, Prop, Vue} from 'vue-property-decorator' @Component export default class App extends Vue { name:string = 'Simon Zhang' // computed get MyName():string { return `My name is ${this.name}` } // methods sayHello():void { alert(`Hello ${this.name}`) } mounted() { this.sayHello(); } }
相當(dāng)于
export default { data () { return { name: 'Simon Zhang' } }, mounted () { this.sayHello() }, computed: { MyName() { return `My name is ${this.name}` } }, methods: { sayHello() { alert(`Hello ${this.name}`) }, } }
大佬都說爽的一批;
然鵝菜鳥我遇到問題一堆,以下做個(gè)積累總結(jié):
1、寫法問題:引入組件和接收父組件傳過來(lái)的參數(shù)
@Component({ components: { XXXX }, props: { mapFlag: Number } })
2、獲取refs,在其后面加上as HTMLDivElement(不知道是不是這插件引起的,懶得管,直接干就是)
let layoutList:any = this.$refs.layout as HTMLDivElement
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue頁(yè)面刷新記住頁(yè)面狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了Vue頁(yè)面刷新記住頁(yè)面狀態(tài)的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-12-12Vue純前端實(shí)現(xiàn)導(dǎo)出Excel并修改樣式
這篇文章主要為大家詳細(xì)介紹了Vue如何利用xlsx-style庫(kù)實(shí)現(xiàn)導(dǎo)出Excel并修改樣式的功能,文中的示例代碼講解詳細(xì),有需要的可以參考下2024-01-01Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫(kù),可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios, axios),本文給大家介紹Vue?axios和vue-axios關(guān)系,感興趣的朋友一起看看吧2022-08-08vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果
這篇文章主要介紹了vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的方法,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-05-05使用Vue3創(chuàng)建多布局系統(tǒng)的三種方法
布局是中大型網(wǎng)站或應(yīng)用的基礎(chǔ),假設(shè)你正在創(chuàng)建一個(gè)網(wǎng)頁(yè)應(yīng)用,它包括主頁(yè)、營(yíng)銷頁(yè)面和應(yīng)用頁(yè)面,你不會(huì)想要為每一頁(yè)重復(fù)所有的工作,對(duì)吧,與Nuxt不同,Vue 3并沒有內(nèi)置的布局系統(tǒng),但是別擔(dān)心,這里將向你展示3種簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)這一點(diǎn),需要的朋友可以參考下2023-08-08使用canvas實(shí)現(xiàn)一個(gè)vue彈幕組件功能
這篇文章主要介紹了使用canvas實(shí)現(xiàn)一個(gè)vue彈幕組件功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11vue3 reactive函數(shù)用法實(shí)戰(zhàn)教程
reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法,reactive的用法與ref的用法相似,也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù),當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新,這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下2022-11-11