使用TS写Vue项目

基础用法 

export default class Base extends Vue {
  // 变量
  private name = "张三";
  private a = 1;
  private b = 2;
  //计算属性
  private get count(): number {
    return Number(this.a) + Number(this.b);
  }
  // methods方法 不带返回值
  public handleChangeName(): void {
    this.name = "李四";
  }
  // methods方法 带返回值
  public getName(): string {
    return this.name;
  }
  // 生命周期
  private created(): void {}// 创建已完成
  private mounted(): void {} // 挂载已完成
  private updated(): void {} // 更新已完成
  private destroyed(): void {} // 组件已销毁
}

prop

父向子传递数据

//JS
export default {
  props:{
    str:{
      type:String,
      default:''
    },
    num:{
      type:Number,
      default:0
    },
    bl:{
      type:Boolean,
      default:false
    }
  }
}

//TS
export default class PageProp extends Vue {
  //字符串
  @Prop({ type: String, default: "" }) str!: string;
  //数字
  @Prop({ type: Number, default: 0 }) num!: number;
  //布尔值
  @Prop({ type: Boolean, default: false }) bl!: boolean;
}

propSync

子向父传递数据与父向子传递数据的简写

//子页面 PagePropSync.vue
//Template
<button @click="handleEditName">把张三改成李四</button>
//TS
export default class PagePropSync extends Vue {
  //使用PropSync之后，父节点与子节点就建立了双向绑定，子节点变了父节点监听的变量也会相应的变，父节点变量变了子节点监听的变量也会相应的变化
  //modelName 父节点绑定的属性 modelName:sync
  //name 子与父需要通讯的变量
  @PropSync("modelName", { type: String }) name!: string;
  public handleEditName(): void {
    this.name = "李四";
  }
}

//父节点 PageHome.vue
//Template
<PagePropSync :modelName.sync="name" />
<p>子组件传过来的值：{{ name }}</p>

//TS
export default class Home extends Vue {
    //PagePropSync
    name = "张三";
}

model

父组件 modelVal 变化，子组件 val 也会跟着变化，val 变化modelVal不会变，总结父组件只能向子组件传递数据

//子组件 PageModel.vue
//Template
<p>Model的输入框 {{val}}</p>

//TS
export default class PageModel extends Vue {
  @Model("modelVal") val!: string;
}


//父组件 PageHome.vue
//Template
<PageModel v-model="modelVal" />

//TS
export default class PageModel extends Vue {
  //Model
  modelVal = "父级传过来的默认值";
}

watch

数据监听

//JS
export default {
    data() {
        return {
            msg: 'hello world!',
            obj: {
                a: 1
            }
        }
    },
    watch: {
        msg() {
            console.log("msg值被改变了");
        },
        obj: {
            handle() {
                console.log("obj被改变了");
            },
            deep: true
        }
    }
}
//TS
export default class PageWatch extends Vue {
    private msg = "hello world!";
    private obj = {
        a: 1
    };
    // 普通监听
    @Watch("msg")
    onMsgChange() {
        console.log("msg值被改变了");
    }
    // 深度监听
    @Watch("obj", {
        deep: true
    })
    onObjChange() {
        console.log("obj被改变了");
    }
}

provide inject

组件通讯，inject注入，provide接收

PageInject.vue 
#inject 注入变量
//Template
<button @click="handleInject">触发父组件App.vue的方法</button>

//TS
export default class PageInjectReactive extends Vue {
  @Inject("reload") readonly reload!: Function;
  public handleInject() {
    this.reload({ obj: { a: 1 } });
  }
}

App.vue
#provide 监听变化
//TS
export default class App extends Vue {
  @Provide("reload")
  reload(val: object) {
    console.log(val);
    console.log("穿过router-view我被子组件调用了");
  }
}

emit

子组件向父组件通讯

//子组件 PageEmit.vue
//Template
<button @click="EmitParent">Emit</button>
//TS
export default class PageEmit extends Vue {
  private msg = "我是PageEmit.vue文件的内容";
  @Emit("EmitParent") //EmitParent 父组件事件名称
  EmitParent() {
    return this.msg;
  }
}

//父组件 PageHome.vue
//Template
<PageEmit @EmitParent="receiveEemitChild" />
//TS
@Component({
  components: {
    PageEmit,
  }
})
export default class Home extends Vue {
  //接收PageEmit.vue 传过来的值
  public receiveEemitChild(val: string): void {
    console.log(val); //子组件传递过来的值
  }
}

ref

获取dom节点

//Template
<div ref="offset">顶部的距离</div>

//TS
export default class PageRef extends Vue {
  @Ref() readonly offset!:HTMLButtonElement;
  mounted() {
    this.$nextTick(() => {
      console.log(this.offset);//返回 <div ref="offset">顶部的距离</div>
    });
  }
}

附上demo地址

https://gitee.com/qing_321/vue-ts.git