在vue+typescript中我们可以使用三种形式定义组件
类组件
扩展组件
函数组件
是我们在ts项目中使用频率最高的组件,它可以使用我们的装饰器,使组件完美的使用typescript.
和平时使用vue的方式完全相同,但是不能使用装饰器。
如果使用过react
的话会知道react
中有函数式组件,并且性能相比于其他组件要好一点但是没有生命周期。
函数型组件
ts项目需要借助vue-property-decorator
,该库完全依赖于vue-class-component
,提供了下面几种装饰符:
@Prop
参数传递
@Watch
监听数据
@Ref
组件的ref
@Emit
指定事件emit,可以使用此修饰符,也可以直接使用 this.$emit()
@Mixins
mixin 注入
@Model
v-model
@Component
@Component
装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项
@Prop() str1!: string; // 必传
@Prop() str2: string | undefined; // 非必传
@Prop({ default: "默认值" }) str3: string | undefined;
private name = "张三";
private age = 18;
private userInfo: UserInfo = {
name: "李四",
age: 39
};
private addAge() {
this.btn.style.background = "yellow";
this.age += 1;
}
get initUser() {
return "计算后的age" + this.age;
}
interface UserInfo {
name: string;
age: number;
}
@Watch("age") handelChangeAge(newVal: number, oldVal: number) { console.log("新数据" + newVal, "老数据" + oldVal); } // 深度监听 @Watch("userInfo", { deep: true, immediate: false }) handelChangeUserInfo(newVal: UserInfo, oldVal: UserInfo) { console.log("新数据" + newVal, "老数据" + oldVal); } 复制代码
@Ref("btn") btn!: HTMLButtonElement;
addAge() { this.btn.style.background = "yellow"; }
// Child
@Emit() addStrClick() { return "1"; } @Emit() addStrClick2(str) { return str + 1; } 复制代码
// father
created() {
console.log("created");
}
mounted() {
console.log("mounted");
}