vue + ts 使用
vue + ts 使用vue-property-decorator 属性@Component (from vue-class-component)@Prop@PropSync@Emit@Model@WatchMixins (the helper function named mixins defined at vue-cl...
·
vue + ts 使用
vue-property-decorator 属性
@Component (from vue-class-component)
@Prop
@PropSync
@Emit
@Model
@Watch
Mixins (the helper function named mixins defined at vue-class-component)
模板
<template></template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class App extends Vue {}
</script>
<style lang="scss" scoped></style>
基础
export default class App extends Vue{
// data值
private msg:string = 123;
// 声明周期钩子
mounted () {...}
// 计算属性 computed
get computedMsg () {
return 'computed ' + this.msg;
}
// 方法
change() {
alert('change: ' + this.msg);
}
}
@Component
import { Component } from 'vue-property-decorator'
@Component({
components:{
componentA,
componentB,
},
directives: {
...
}
})
export default class App extends Vue{}
@Prop
import { Component, Vue, Prop} from 'vue-property-decorator';
@Component
export default class Content extends Vue {
// 确定为string属性 -> !: string
@Prop({default: '200px'}) private navWidth!: string;
@Prop({default: false}) private isCollapse: boolean | undefined;
@Prop([String, Boolean]) private ym: string | boolean | undefined;
}
@Emit
<template>
<div @click="toggleSlider">收缩</div>
</template>
import { Component, Vue, Emit } from 'vue-property-decorator';
@Component
export default class Content extends Vue {
@Emit ('toggleMenu')
private toggleMenu(isCollapse: boolean) {}
private toggleSlider() {
this.toggleMenu(!this.isCollapse);
}
}
@Model
<template>
<input type="checkbox" :checked="checked" @change="changeVal"/>
</template>
import { Component, Vue, Emit, Model } from 'vue-property-decorator';
@Component
export default class Content extends Vue {
@Model("change") checked!:number;
changeVal(event: any){
this.$emit("change", event.target.value)
}
}
@Watch
<template>
<input @change="changeVal" value="msg" />
</template>
import { Component, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Content extends Vue {
private msg:string = "";
@Watch("msg");
changeVal(newVal:string, oldVal:string){
...
}
}
Minix
import Component, { mixins } from 'vue-class-component';
import MyMixin from './mixin.js'
@Component
export class MyComp extends mixins(MyMixin) {
created () {
console.log(this.mixinValue) // -> Hello
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)