脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue ts vue-class-component使用

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。

一、脚手架创建项目

通过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可以更好的区分私有还是共有。

<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('监听属性', { 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）生命周期

和之前区别不大 使用对应的函数名称

<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 插件 帮助我们更好的使用装饰器开发

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）模块化

在开发中模块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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • requirejs + vue 项目搭建详解

    requirejs + vue 项目搭建详解

    这篇文章主要介绍了requirejs + vue 项目搭建详解,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 解决Vue3.0刷新页面警告[Vue Router warn]:No match found for location with path /xxx

    解决Vue3.0刷新页面警告[Vue Router warn]:No match 

    这篇文章主要介绍了解决Vue3.0刷新页面警告[Vue Router warn]:No match found for location with path /xxx问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    本篇文章主要介绍了基于vue监听滚动事件实现锚点链接平滑滚动的方法，非常具有实用价值，有兴趣的可以了解一下
    2018-01-01
  • vue项目中使用高德地图的超详细步骤

    vue项目中使用高德地图的超详细步骤

    在vue项目中添加高德地图,对开发地图的开发人员有一定帮助,下面这篇文章主要给大家介绍了关于vue项目中使用高德地图的超详细步骤,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Vue resource中的GET与POST请求的实例代码

    Vue resource中的GET与POST请求的实例代码

    本篇文章主要介绍了Vue resource中的GET与POST请求的实例代码，非常具有实用价值，需要的朋友可以参考下
    2017-07-07
  • vue+elementUI的表格最后一行合计自定义显示方式

    vue+elementUI的表格最后一行合计自定义显示方式

    这篇文章主要介绍了vue+elementUI的表格最后一行合计自定义显示方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • vue中使用svg-icon遇到的坑及解决

    vue中使用svg-icon遇到的坑及解决

    这篇文章主要介绍了vue中使用svg-icon遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • vue项目base64加解密使用方式以及解密乱码

    vue项目base64加解密使用方式以及解密乱码

    这篇文章主要介绍了vue项目base64加解密使用方式以及解密乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • Vue NextTick介绍与使用原理

    Vue NextTick介绍与使用原理

    我们对Vue中data数据的修改会导致界面对应的响应变化，而通过nextTick方法，可以在传入nextTick的回调函数中获取到变化后的DOM，讲起来可能还是有点梦幻，下面我们直接使用nextTick体验一下效果
    2022-08-08
  • Vue在 Nuxt.js 中重定向 404 页面的方法

    Vue在 Nuxt.js 中重定向 404 页面的方法

    这篇文章主要介绍了Vue在 Nuxt.js 中重定向 404 页面的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04

最新评论