使用typescript来写vue详细说明

说明

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

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

目录

一个基本的 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返回值为传递过去的信息