在vue项目使用ts时,装饰器有以下几种,下面为这些装饰器的具体用法并且有和js中写法的对比:
@Component
@Emit
@Prop
@Watch
@Model
@Inject / @Provide
Mixins
下面为具体代码:
1.@Component
ts中引入组件components写在@Component中,如下:
parent组件--{ {title}}
import Home from './Home.vue'
import About from './About.vue'
import { Component, Vue } from 'vue-property-decorator';
@Component({
components: {
Home,
About
}
})
export default class extends Vue {
private title: string = '父组件中的值'
}
复制代码
下面为在js中引入组件components的写法,与上面ts的代码效果一样:
import Home from './Home.vue'
import About from './About.vue'
export default {
data() {
return {
title: '父组件中的值'
}
},
components: {
Home,
About
}
}
复制代码
2.@Emit
ts中@Emit的用法如下:
vue+ts项目vue-property-decorator用法
触发emit
import { Component, Vue, Emit } from 'vue-property-decorator';
@Component({})
export default class Home extends Vue {
private mounted() {
this.$on('demo-log', (data: any): void => {
alert(data)
})
}
@Emit('demo-log')
triggerEmit(n: any) {
console.log('hhh')
}
}
复制代码
下面为@Emit的另一种写法