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

更新時(shí)間：2023年11月28日 15:32:17 作者：奧特曼

vue-property-decorator?是一個(gè)?Vue.js?的裝飾器庫,它提供了一些裝飾器來讓你在?Vue?組件中定義屬性、計(jì)算屬性、方法、事件等,本文給大家介紹vue2使用ts?vue-class-component的相關(guān)知識,感興趣的朋友一起看看吧

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

通過vue-cli進(jìn)行安裝

vue create v2ts

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

二、vue-property-decorator

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

tip：引入Component是將類組件轉(zhuǎn)換成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，否則會(huì)識別不到這個(gè)變量，如果你只想定義這個(gè)變量也可以采取data函數(shù)的形式。

<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）計(jì)算屬性

計(jì)算屬性在方法名前加一個(gè)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ū)別不大使用對應(yīng)的函數(shù)名稱

<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的形式導(dǎo)出Emit 調(diào)用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的時(shí)候可以安裝 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: {
  }
})

組件調(diào)用：

<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);
    // 調(diào)用mutation的方法
    this.setUserName('abcd')
    // 調(diào)用actions的方法
    this.requestUserName(2)
    // 獲取getter
    console.log(this.getUserName);
  }
}
</script>

四個(gè)模塊的導(dǎo)入使用大致相同

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

（2）模塊化

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

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
  }
})

組件調(diào)用：

<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>

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

目錄

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

二、vue-property-decorator

（1）變量

（2）方法

(3) watch

（4）計(jì)算屬性

（5）生命周期

(6) 組件

（1）注冊組件

(2) 父傳子

（3）子傳父

（7）ref引用

三、vuex-class

（1）全局使用

（2）模塊化

四、mixin

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

目錄

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

二、vue-property-decorator

（1）變量

（2）方法

(3) watch

（4）計(jì)算屬性

（5）生命周期

(6) 組件

（1）注冊組件

(2) 父傳子

（3）子傳父

（7）ref引用

三、vuex-class

（1）全局使用

（2）模塊化

四、mixin

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

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

三、vuex-class

四、mixin