美文网首页
vue + typescript

vue + typescript

作者: 神话降临 | 来源:发表于2020-05-31 18:06 被阅读0次

    前言

    使用typescript有一年时间了,期间遇到了很多坑,总结一下
    ts的安装我就不提了,现在的开发基本都依赖于vue-cli脚手架,安装的时候勾选上ts就行了
    脚手架结合ts使用的区别看一段代码

    常规使用

    <template>
       <div>
          <div @click='changeData'>{{content}}</div>
      </div>
       
    </template>
    // 规定类型是ts
    <script lang="ts">
    //引用vue-property-decorator 装饰器
        import {Vue, Component} from 'vue-property-decorator';
    // 组件注入
        @Component
        export default class Crumbs extends Vue{
          // 申明变量时,不在需要申明data() {return {}}
           content: '测试ts',
          
         // 父组件流下来的数据
          @Prop({default: 'zhangsan'})
          name!: string
          @Prop({default: '25'})
          age!: number
             
          // 申明方法时,不需要methods() {}
          changeData() {
              this.content = '改变内容'
          }
        
        }
    </script>
    

    在当前组件内引用其他组件

    <template>
           <div>
          <div @click='changeData'>{{content}}</div>
          <A></A>
      </div>
    </template>
    // 假如当前组件目录下有一个组件A,引入A组件
    <script lang="ts">
      import A from ‘./A.vue’
        // 组件注入
        @Component(components: {
           A,
        },)
    <script>
    

    相关文章

      网友评论

          本文标题:vue + typescript

          本文链接:https://www.haomeiwen.com/subject/izdrzhtx.html