欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2使用ts?vue-class-component的過程

 更新時間：2023年11月28日 15:32:17   作者：奧特曼  
vue-property-decorator?是一個?Vue.js?的裝飾器庫,它提供了一些裝飾器來讓你在?Vue?組件中定義屬性、計算屬性、方法、事件等,本文給大家介紹vue2使用ts?vue-class-component的相關知識,感興趣的朋友一起看看吧

目前，對于Vue3來說，TypeScript的支持已經相當成熟，但公司的老項目一直處于迭代和維護無法從v2重構成v3，并且重構的成本也是很大的一個問題，所以記錄一下vue2如何去搭配TypeScript。

一、腳手架創(chuàng)建項目

通過vue-cli進行安裝

vue create v2ts

以下是腳手架的配置，僅供參考

二、vue-property-decorator

vue-property-decorator 是一個 Vue.js 的裝飾器庫，它提供了一些裝飾器來讓你在 Vue 組件中定義屬性、計算屬性、方法、事件等。使用這些裝飾器可以讓 Vue 組件的代碼更加清晰簡潔，同時也提高了代碼的可讀性和可維護性。

tip：引入Component是將類組件轉換成Vue組件。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HomeView extends Vue {
}
</script>

（1）變量 

由于使用的class-component，所以定義變量也是比較簡單，只需要把變量寫在class里，使用private和public可以更好的區(qū)分私有還是共有。

<template>
  <div id="app">
    {{ a }}
    {{ b }}
  </div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
export default class HomeView extends Vue {
  private a = 1
  public b = 2
}
</script>

tip：注意 不要初始化不賦值或賦值為undefined，否則會識別不到這個變量，如果你只想定義這個變量也可以采取data函數的形式。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HomeView extends Vue {
  data () {
    return {
      d: undefined
    }
  }
}

（2）方法

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HomeView extends Vue {
  private a = 1
  private add () {
    console.log(this.a)
    this.a++
  }
}
</script>

(3) watch

語法：

  @Watch('監(jiān)聽屬性', { immediate, deep })
  private 方法名 (新值，舊值) {
    console.log(v)
  }

示例： 

<template>
  <div id="app">
    {{ obj.a }}
    <button @click="add">+1</button>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
@Component
export default class HomeView extends Vue {
  private obj = { a: 1 };
  private add () {
    this.obj.a++
  }
  @Watch('obj', { immediate: true, deep: true })
  private updateA (v: { a: number }) {
    console.log(v)
  }
}
</script>

（4）計算屬性

計算屬性 在方法名前 加一個get就好了

<template>
  <div id="app">
    {{ obj.a }}
    <button @click="add">+1</button>
    {{ doubleA }}
  </div>
</template>  
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HomeView extends Vue {
  private obj = { a: 1 };
  private add () {
    this.obj.a++
  }
  get doubleA () {
    return this.obj.a * 2
  }
}
</script>

（5）生命周期

和之前區(qū)別不大 使用對應的函數名稱

<script lang="ts">
@Component
export default class HomeView extends Vue {
 
  created () {
    console.log(123)
  }
 
  mounted () {
    console.log(456)
  }
}
</script>

(6) 組件

（1）注冊組件

<Son text="哈哈" />

(2) 父傳子

父

<Son text="哈哈" />

子 

<template>
    <div>{{ text }}</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component
export default class Son extends Vue {
    @Prop({ type: String, default: '' }) text!:string
}
</script>

（3）子傳父 

子

<template>
    <div>
        <button @click="emit">子傳父</button>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class Son extends Vue {
    emit () {
      this.$emit('update', 123)
    }
}
</script>

父

<template>
  <div id="app">
    <Son @update="updateHandler"/>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Son from '@/components/Son.vue'
@Component({
  components: {
    Son
  }
})
export default class HomeView extends Vue {
  updateHandler (val:number) {
    console.log(val, '接受了')
  }
}
</script>

也可以通過vue-property-decorator的形式 導出Emit 調用emit的方法即可

<template>
  <div class="hello">
    <button @click="send">傳值</button>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
  @Emit()
  send ():number {
    return 20
  }
}
</script>

 （7）ref引用

<template>
  <div id="app">
    {{ a }}
    <Son ref="son" />
  </div>
</template>
<script lang="ts">
import Son from '@/components/Son.vue'
import { Component, Vue } from 'vue-property-decorator'
interface SonComponent extends Vue {
  logHello: ()=>void
}
@Component({
  components: { Son }
})
export default class App extends Vue {
  a = 1;
  mounted () {
    (this.$refs.son as SonComponent).logHello()
  }
}
</script>

三、vuex-class

為了更好的搭配vue-class-component 在使用vuex的時候可以安裝 vuex-class 插件 幫助我們更好的使用裝飾器開發(fā)

npm i vuex-class

（1）全局使用 

store.ts 

import Vue from 'vue'
import Vuex, { Commit } from 'vuex'
Vue.use(Vuex)
interface state {
  username: string
}
export default new Vuex.Store({
  state: {
    username: 'default'
  },
  getters: {
    getUserName (state: state) {
      return '姓名' + state.username
    }
  },
  mutations: {
    SET_USERNAME (state: state, val: string) {
      state.username = val
    }
  },
  actions: {
    async requestUserName (context: { commit: Commit }, id: number) {
      const users = [
        { id: 1, name: 'Ulrtraman' },
        { id: 2, name: 'Monsters' }
      ]
      return new Promise((resolve) => {
        setTimeout(() => {
          const username = users.find(it => it.id === id)?.name
          context.commit('SET_USERNAME', username)
          resolve(username)
        }, 1000);
      })
    }
  },
  modules: {
  }
})

組件調用：

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State, Mutation, Action, Getter } from "vuex-class";
@Component
export default class Sister extends Vue {
  @State("username")
  private username!:string;
  @Mutation("SET_USERNAME")
  private setUserName!:(name:string) => void
  @Action("requestUserName")
  private requestUserName!:(id:number) => void
  @Getter("getUserName")
  private getUserName!:string
  async created () {
    // 獲取state的username
    console.log(this.username);
    // 調用mutation的方法
    this.setUserName('abcd')
    // 調用actions的方法
    this.requestUserName(2)
    // 獲取getter
    console.log(this.getUserName);
  }
}
</script>

四個模塊的導入使用大致相同 

@模塊("模塊的屬性命名")
  private 新名字!:類型;

（2）模塊化

在開發(fā)中模塊vuex的場景還是比較多的 達到 清晰 易維護。

store/user/user.ts

import { Commit } from 'vuex';
interface state {
    username: string
}
const state: state = {
    username: 'default'
}
const mutations = {
    SET_USERNAME (state: state, val: string) {
        state.username = val
    }
}
const getters = {
    getUserName (state: state) {
        return '姓名' + state.username
    }
}
const actions = {
    async requestUserName (context: { commit: Commit }, id: number) {
        const users = [
            { id: 1, name: 'Ulrtraman' },
            { id: 2, name: 'Monsters' }
        ]
        return new Promise((resolve) => {
            setTimeout(() => {
                const username = users.find(it => it.id === id)?.name
                context.commit('SET_USERNAME', username)
                resolve(username)
            }, 1000);
        })
    }
}
export default {
    state, getters, mutations, actions, namespaced: true
}

tip: 要加namespace 命名空間 

store/index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user/user'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    user
  }
})

組件調用：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
const user = namespace('user');
@Component({
  components: { Son, Sister }
})
export default class App extends Vue {
  @user.State
  private username!: number;
  @user.Mutation
  private SET_USERNAME!: (name:string) => void;
  @user.Action
  private requestUserName!: (id:number) => void;
  @user.Getter
  private getUserName!: number;
  async beforeMount () {
    // state
    console.log('state:', this.username);
    // getter
    console.log('getter:', this.getUserName);
    // mutation
    this.SET_USERNAME('helloworld')
    // action
    await this.requestUserName(1);
  }
}
</script>

 使用方法：

import { namespace } from 'vuex-class';
const 變量 = namespace('文件名');
..
  @變量.模塊
  private 新名字!: 類型;

四、mixin

src/mixins/mixin.ts

import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
    created () {
        console.log('mixin的created');
    }
}

使用mixin

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import mixin from '@/mixins/mixin'
@Component
export default class HelloWorld extends Mixins(mixin) {
}
</script>

到此這篇關于vue2使用ts vue-class-component的文章就介紹到這了,更多相關vue ts vue-class-component使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • vue嵌入本地iframe文件并獲取某元素的值方式

    vue嵌入本地iframe文件并獲取某元素的值方式

    這篇文章主要介紹了vue嵌入本地iframe文件并獲取某元素的值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • 從0搭建vue-cli4腳手架

    從0搭建vue-cli4腳手架

    這篇文章主要介紹了從0搭建vue-cli4腳手架，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • 徹底揭秘keep-alive原理(小結)

    徹底揭秘keep-alive原理(小結)

    這篇文章主要介紹了徹底揭秘keep-alive原理(小結)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • Vue封裝的組件全局注冊并引用

    Vue封裝的組件全局注冊并引用

    這篇文章主要為大家詳細介紹了Vue封裝的組件全局注冊并引用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-07-07
  • vue2中,根據list的id進入對應的詳情頁并修改title方法

    vue2中,根據list的id進入對應的詳情頁并修改title方法

    今天小編就為大家分享一篇vue2中,根據list的id進入對應的詳情頁并修改title方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue3中使用Monaco-editor的教程詳解

    Vue3中使用Monaco-editor的教程詳解

    Monaco-editor,一個vs?code?編輯器,需要將其繼承到項目,這篇文章主要為大家詳細介紹了如何在vue中安裝和使用Monaco-editor,有需要的小伙伴可以參考下
    2023-11-11
  • 在Vue項目中用fullcalendar制作日程表的示例代碼

    在Vue項目中用fullcalendar制作日程表的示例代碼

    這篇文章主要介紹了在Vue項目中用fullcalendar制作日程表，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-08-08
  • 在vue項目中使用element-ui的Upload上傳組件的示例

    在vue項目中使用element-ui的Upload上傳組件的示例

    本篇文章主要介紹了在vue項目中使用element-ui的Upload上傳組件的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • vue實現數字動態(tài)翻牌的效果（開箱即用）

    vue實現數字動態(tài)翻牌的效果（開箱即用）

    這篇文章主要介紹了vue實現數字動態(tài)翻牌的效果（開箱即用）,實現原理是激將1到9的數字豎直排版，通過translate移動位置顯示不同數字，本文通過實例代碼講解，需要的朋友可以參考下
    2019-12-12
  • ?面試問題Vue雙向數據綁定原理

    ?面試問題Vue雙向數據綁定原理

    這篇文章主要介紹了?面試問題Vue雙向數據綁定原理，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
    2022-09-09

最新評論