使用typescript来写vue详细说明

逃离我推掉我的手 2021-12-05 16:20 302阅读 0赞

# 说明 #

使用vue官方的`vue-cli3`搭建的`typescript`和`vue`的开发环境

安装的时候,`vue-cli3`会默认安装`vue-property-decorator`  
Vue Property Decorator提供了7个装饰器(@Emit、@Inject、@Model、@Prop、@Provide、@Watch、@Component)，实现像原生 JavaScript class 那样声明组件

# 目录 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]

# 一个基本的 vue 组件模板 #

使用

<template>
      <div class="test">
        test
      </div>
    </template>
    <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component({ }) export default class Test extends Vue { } </script>

# 声明响应式属性 data #

<template>
      <div class="test">
        {
       {name}}
      </div>
    </template>
    <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component({ }) export default class Test extends Vue { private name: string = '李明'; } </script>

这样的写法等同于之前的：

export default {
      name: 'App',
      data() {
        return {
          name: '李明'
        }
      }
    }

# 计算属性 computed #

<template>
      <div class="test">
        <button class="btn" @click="num-=1">-</button>
    
        <div>num:{
       {num}}</div>
        <div>age:{
       {age}}</div>
    
        <button class="btn" @click="num+=1">+</button>
      </div>
    </template>
    <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component({ }) export default class Test extends Vue { private num: number = 0; // 计算属性 get age () :string { // 计算属性的get return `我的年龄是 ${ this.num} 岁` } set age (value) { // 计算属性的set this.num -= 1 } } </script>
    <style lang="less" scoped> .btn{ padding:10px 30px; font-size: 20px; border: none; background: #6BD089; margin:10px 0; } </style>

# 侦听属性 watch #

<template>
      <div class="test">
        <input type="text" v-model="name">
        <p>{
       {str}}</p>
      </div>
    </template>
    <script lang="ts"> import { Component, Vue, Watch } from 'vue-property-decorator' @Component({ }) export default class Test extends Vue { private str: string = '' private name: string = 'jerry' // 监控name属性 @Watch('name') changeName (newValue: string, oldValue: string) { // newValue:name改变以后得 // oldValue:name改变之前的 console.log('newValue') console.log(newValue) console.log('oldValue') console.log(oldValue) // 将name反转，最后赋值给str this.str = this.name.split('').reverse().join('') } } </script>

# 生命周期 #

<template>
      <div class="test">
      </div>
    </template>
    <script lang="ts"> import { Component, Vue, Watch } from 'vue-property-decorator'; @Component export default class Test extends Vue { // 生命周期 beforeCreate () { console.log('before create') } created () { console.log('created') } beforeMount () { console.log('before mount') } mounted () { console.log('mounted') } } </script>

# 组件注册与传递 Prop #

parent.vue

<template>
      <div class="test">
        <Son mes="我是父组件传递过来的信息"></Son>
      </div>
    </template>
    <script lang="ts"> import { Component, Vue, Watch } from 'vue-property-decorator' import Son from './son.vue' @Component({ components: { Son } }) export default class Test extends Vue { } </script>

son.vue

<template>
      <div class="son">
        <h1>{
       {mes}}</h1>
      </div>
    </template>
    <script lang="ts"> import { Component, Vue, Watch, Prop } from 'vue-property-decorator' @Component export default class Test extends Vue { @Prop() private mes!: string } </script>

# 父子组件通信 Emit #

parent.vue

<template>
      <div class="test">
        <Son @sonMes='parentMes'></Son>
      </div>
    </template>
    <script lang="ts"> import { Component, Vue, Watch } from 'vue-property-decorator' import Son from './son.vue' @Component({ components: { Son } }) export default class parent extends Vue { parentMes (val: string) { console.log(1) alert('子组件传递:' + val) } } </script>

son.vue

<template>
      <div class="son">
        <button @click='myClick'>传递给父组件</button>
        <div>输入的姓名：
          <input type="text" v-model="name">
        </div>
      </div>
    </template>
    <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component export default class Test extends Vue { private name: string = '' myClick () { console.log(2) this.$emit('sonMes', this.name) } } </script>

son.vue或者使用`@Emit`来写

<template>
      <div class="son">
        <button @click='myClick'>传递给父组件</button>
        <div>输入的姓名：
          <input type="text" v-model="name">
        </div>
      </div>
    </template>
    <script lang="ts"> import { Component, Vue, Emit } from 'vue-property-decorator' @Component export default class Test extends Vue { private name: string = '' @Emit('sonMes') myClick () { return this.name } } </script>

**注意**：这里的`@Emit('sonMes')`参数sonMes为父组件绑定的那个函数名，`myClick`返回值为传递过去的信息

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20211205/b3adc185cb5a4295916e6752363f198a.png