vue与TypeScript的基本使用

1、data的使用

<template>
    <div class='helloTs'>
        <p>{{msg}}</p>
        <p>{{title.msg}}</p>
    </div>
</template>

<script lang="ts">/* 注意这里要写ts的标识 */
    import { Component,Vue } from 'vue-property-decorator';
    @Component
    export default class parent extends Vue {
        private msg:String = "typescript初体验123"//默认为public
        private title:Object = {
            msg:"文字描述"
        }
    }
</script>

2、父子组件的使用

//parent.vue
<template>
    <div class='helloTs'>
        {{title.msg}}
        <child></child><!-- 使用组件 -->
    </div>
</template>

<script lang="ts">/* 注意要写ts的标识 */
    import child from './child.vue'/* 引入对应组件 */
    import { Component, Prop, Vue } from 'vue-property-decorator';
    @Component({//注册组件
        components:{
            child
        }
    })
    export default class parent extends Vue {/* parent为当前的组件名 */
        private msg:String = "typescript初体验123"
        private title:Object = {
            msg:"文字描述"
        }
    }
</script>

//child
<template>
    <div class="child">
        <p>{{info}}</p>
    </div>
</template>
<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    @Component
    export default class child extends Vue{
        private info:string="child子组件"
    }
</script>

3、生命周期与自定义方法的使用

<template>
    <div class='helloTs'>
        {{title.msg}}
        <child></child><!-- 使用组件 -->
    </div>
</template>

<script lang="ts">/* 注意要写ts的标识 */
    import child from './child.vue'/* 引入对应组件 */
    import { Component, Prop, Vue } from 'vue-property-decorator';
    @Component({//注册组件
        components:{
            child
        }
    })
    export default class parent extends Vue {/* parent为当前的组件名 */
        private msg:String = "typescript初体验123"
        private title:Object = {
            msg:"文字描述"
        }
        private mounted() {/* 其它生命周期使用类似 */
            console.log("mounted生命周期执行");
            console.log(this.init());
        }
        private init(val:string="自定义方法",msg?:string):string{
            return val + (msg || '哈哈哈哈');
        }
    }
</script>

4、父子组件互相传值的使用

1、父传子

//parent
<template>
    <div class='helloTs'>
        {{title.msg}}
        <child :info="msg"></child><!-- 使用组件 -->
    </div>
</template>

<script lang="ts">/* 注意要写ts的标识 */
    import child from './child.vue'/* 引入对应组件 */
    import { Component, Prop, Vue } from 'vue-property-decorator';
    @Component({//注册组件
        components:{
            child
        }
    })
    export default class parent extends Vue {/* parent为当前的组件名 */
        private msg:String = "typescript初体验123"
        private title:Object = {
            msg:"文字描述"
        }
        private mounted() {/* 其它生命周期使用类似 */
            console.log("mounted生命周期执行");
            console.log(this.init());
        }
        private init(val:string="自定义方法",msg?:string):string{
            return val + (msg || '哈哈哈哈');
        }
    }
</script>

//child
<template>
    <div class="child">
        {{info}}
    </div>
</template>
<script lang="ts">
    import { Prop, Vue, Component } from 'vue-property-decorator';
    @Component
    export default class child extends Vue{
        @Prop({
            type:String,
            default:"默认值"
        })
        info!:string//有！表示必定存在值
    }
</script>

2、子传父

//parent
<template>
    <div class='helloTs'>
        {{title.msg}}
        <child :info="msg" @childFunc="childFunc"></child><!-- 使用组件 -->
    </div>
</template>

<script lang="ts">/* 注意要写ts的标识 */
    import child from './child.vue'/* 引入对应组件 */
    import { Component, Prop, Vue } from 'vue-property-decorator';
    @Component({//注册组件
        components:{
            child
        }
    })
    export default class parent extends Vue {/* parent为当前的组件名 */
        private msg:String = "typescript初体验123"
        private title:Object = {
            msg:"文字描述"
        }
        private mounted() {/* 其它生命周期使用类似 */
            console.log("mounted生命周期执行");
            console.log(this.init());
        }
        private init(val:string="自定义方法",msg?:string):string{
            return val + (msg || '哈哈哈哈');
        }
        private childFunc(elem:String){
            console.log(elem);
        }
    }
</script>

//child
<template>
    <div class="child">
        {{info}}
        <button @click="childFunc">点击传值给父组件</button>
    </div>
</template>
<script lang="ts">
    import { Prop, Vue, Component,Emit } from 'vue-property-decorator';
    @Component
    export default class child extends Vue{
        @Prop({
            type:String,
            default:"默认值"
        })
        info!:string//有！表示必定存在值
        @Emit("childFunc")//注意，如果没有这个参数，即写成@Emit()，则会使用当前函数名作为事件名，即为child-func
        childFunc():String{
            return "传递给父组件的值";
        }
    }
</script>

5、watch的使用

//parent
<template>
    <div class='helloTs'>
        {{title.msg}}
        <child :info="msg" @childFunc="childFunc"></child><!-- 使用组件 -->
    </div>
</template>

<script lang="ts">/* 注意要写ts的标识 */
    import child from './child.vue'/* 引入对应组件 */
    import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
    @Component({//注册组件
        components:{
            child
        }
    })
    export default class parent extends Vue {/* parent为当前的组件名 */
        private msg:String = "typescript初体验123"
        private title:Object = {
            msg:"文字描述"
        }
        private mounted() {/* 其它生命周期使用类似 */
            console.log("mounted生命周期执行");
            console.log(this.init());
        }
        private init(val:string="自定义方法",msg?:string):string{
            return val + (msg || '哈哈哈哈');
        }
        private childFunc(elem:String){
            this.msg = elem;
        }
        @Watch("msg")//msg表示要监听的数据项
        private msgWatch(newVal:String,OldVal:String){
            console.log(newVal);
        }
    }
</script>

//child
<template>
    <div class="child">
        {{info}}
        <button @click="childFunc">点击传值给父组件</button>
    </div>
</template>
<script lang="ts">
    import { Prop, Vue, Component,Emit } from 'vue-property-decorator';
    @Component
    export default class child extends Vue{
        @Prop({
            type:String,
            default:"默认值"
        })
        info!:string//有！表示必定存在值
        @Emit("childFunc")//注意，如果没有这个参数，即写成@Emit()，则会使用当前函数名作为事件名，即为child-func
        childFunc():String{
            return "传递给父组件的值";
        }
    }
</script>

6、propSync的使用

//parent
<template>
    <div class='helloTs'>
        {{title.msg}}
        <child :info="msg" @childFunc="childFunc" :flag.sync="flag"></child><!-- 使用组件 -->
    </div>
</template>

<script lang="ts">/* 注意要写ts的标识 */
    import child from './child.vue'/* 引入对应组件 */
    import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
    @Component({//注册组件
        components:{
            child
        }
    })
    export default class parent extends Vue {/* parent为当前的组件名 */
        private msg:String = "typescript初体验123"
        private title:Object = {
            msg:"文字描述"
        }
        private flag:Boolean = false
        private mounted() {/* 其它生命周期使用类似 */
            console.log("mounted生命周期执行");
            console.log(this.init());
        }
        private init(val:string="自定义方法",msg?:string):string{
            return val + (msg || '哈哈哈哈');
        }
        private childFunc(elem:String){
            this.msg = elem;
        }
        @Watch("msg")//msg表示要监听的数据项
        private msgWatch(newVal:String,OldVal:String){
            console.log(newVal);
        }
        @Watch("flag")
        private flagWatch(newVal:Boolean,oldVal:Boolean){
            console.log(`flag的值为${newVal}`);
        }
    }
</script>

//child
<template>
    <div class="child">
        {{info}}
        <button @click="childFunc">点击传值给父组件</button>
    </div>
</template>
<script lang="ts">
    import { Prop, Vue, Component,Emit,PropSync } from 'vue-property-decorator';
    @Component
    export default class child extends Vue{
        @Prop({
            type:String,
            default:"默认值"
        })
        info!:string//有！表示必定存在值
        @Emit("childFunc")//注意，如果没有这个参数，即写成@Emit()，则会使用当前函数名作为事件名，即为child-func
        childFunc():String{
            this.syncFlag = !this.syncFlag;
            return "传递给父组件的值";
        }
        @PropSync("flag",{
            type:Boolean,
            default:false
        })
        private syncFlag!:Boolean
    }
</script>

7、全局方法的挂载和使用

//在main.js中
// 全局方法的引入和注册
import utils from "@/assets/ts/utils"
Vue.prototype.utils = utils;
declare module 'vue/types/vue' {
    interface Vue{
        utils:any
    }
}
//全局方法的引入和注册

参考文档：https://segmentfault.com/a/1190000019906321

有需要的可以自己再进行拓展