vue3.0+typescript使用总结

第一步:安装初始化vue项目,引入ts

vue create demo 选择第二个(Manually select features)手动配置 进入下个页面使用空格键选中使用上下箭头跳到选项中,以下是我的选择:

安装完成后,进入文件夹执行命令npm run serve启动项目

第二步:开始编写页面

• 需要在标签中加上lang="ts" 如:

<script lang="ts"></script>

• 我们在vue-property-decorator中引入我们组件内需要的装饰器

import {Component,Watch,Prop,Emit,Vue} from 'vue-property-decorator'

• 然后导出我们的.vue文件。比如我在这里导出注册页面组件,这就是一个.vue的整体结构完成。

export default class Home extends Vue {
    //1:总结对于data里的变量,我们可以直接按照ts定义变量的写法就可以
    valA:string = '我是父组件的变量1';
    valB:number = 1;
 
}

第三步:了解装饰器

• @Component({}) 这个方法是引入子组件

import HelloWorld from '@/components/HelloWorld.vue'
@Component({//这里是放子组件的
    components:{
        HelloWorld
    }
})

父组件给子组件传值:

• @Porp 父子组件之间传值:

父组件页面:
<HelloWorld :parentValue="parentValue"/></HelloWorld>
export default class Home extends Vue {
  private parentValue:string = '父组件传给子组件的值';
}
子组件页面:
import { Component, Prop, Vue } from 'vue-property-decorator';//需要引入Prop
export default class Children extends Vue{
        @Prop(String) //括号里为父组件传来的值的类型
        private parentValue:string;//父组件传来的值用parentValue接收
    
}

如果父组件向子组件动态传值(即变量)需要做以下改变: 子组件中接收变量的值需要有一个默认值,比如上面子组件中的代码

@Prop(String)
private parentValue:string = "";//这里默认给了一个空值
同时需要对这个变量进行监听,监听其变化:
    @Watch("parentValue")
    private onParentValue(newVal:any){
        输出变化后的值
        console.log(newVal);
    }

子组件给父组件传值:

子组件页面:
<template>
    <div>
        <h4>父组件给子组件传的值:{{parentValue}}</h4>
        <!--子组件向父组件传值方法一:直接调用@Emit-->
        <el-button @click="handleToParent">方法一</el-button>
        <el-button @click="handleToParent2">方法二</el-button>
    </div>
</template>

export default class Children extends Vue{
  @Prop(String) //括号里为父组件传来的值的类型
    private parentValue:string;//父组件传来的值用parentValue接收
    private msg: string = "要传递给父组件的值";
    
    //给父组件传值
    方法一:
    @Emit()
     private handleToParent() { 
        return this.msg;
    }
    
    
    //这时父组件接收值时是用@Emit("test")括号中的test接收的，test会把正面的方法名字覆盖,（test）是自定义的
    方法二:
    @Emit("test")               
    private handleToParent2(){
        return this.msg2;
    }
}

如果要传递多个值，建议把这多个值封装成一个对象，然后一块传递。如：

    @Emit()
    private test() {
        // 要传给父组件的多个值
        const params = {
            param1: value1,
            param2: value2,
            // ......
        };
        return params;
     }

父组件页面:
 <children :parent-value="msg" 
        @handle-to-parent="handleChildValue"
        @test="handleChildValue2"
        ></children>
        
        export default class BoookTest extends Vue{
        //接受方法1
        private childValue:string = "";//传给父的值
        private handleChildValue(val: string) {
            this.childValue = val; // val: 子组件传过来的值
        }


        //接受方法2
        private childValue2:string = "";
        private handleChildValue2(val:string){
            this.childValue2 = val;
        }
    }

计算属性

    export default class BoookTest extends Vue{
        //使用计算属性 这里就要用到getter
        //总结对于vue中的计算属性我们只需要将该计算属性名定义为一个函数并在函数前加上get关键字即可
        get valC(){
           return 10;
    }