vue-property-decorator
这个组件完全依赖于vue-class-component.它具备以下几个属性:
@Component (完全继承于vue-class-component)
@Emit
@Inject
@Provice
@Prop
@Watch
@Model
Mixins (在vue-class-component中定义);
使用
当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样:
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
@Component({})
export default class "组件名" extends Vue{
ValA: string = "hello world";
ValB: number = 1;
}
</script>
等同于
<script>
import Vue from 'vue';
export default {
data(){
return {
ValA: 'hello world',
ValB: 1
}
}
}
</script>
父组件Index.vue
<template>
<div>
{{ count }}
<a-button type="primary" @click="countAdd">增加</a-button>
<p>total: {{ total }}</p>
<p>prop-a: {{ propA }}</p>
<Home @returnParent="handlerChildValue"/>
<!-- <Home @return-parent="handlerChildValue"/> -->
</div>
</template>
<script lang="ts">
import Home from '../views/Home.vue'
import { Vue, Prop, Component, Watch, Emit } from 'vue-property-decorator'
const sessionMenus: string | null = sessionStorage.getItem('menus')
@Component({
components: { Home }
})
export default class Layout extends Vue {
// prop !表示这个prop一定有值 ? 代表可选参数
@Prop({ default: 'propa' }) private propA!: string
@Prop() private propB?: string
@Prop() private propC: any
// data
private menus: any[] = sessionMenus ? JSON.parse(sessionMenus) : []
private count: number = 0
// watch
@Watch('count')
private onChangeCount (val: number) {
console.log(val)
}
// 计算属性
// 原本Vue中的computed里的每个计算属性都变成了在前缀添加get的函数.
get total () {
return this.count + 10
}
// 生命周期
private created () {
console.log(this.menus)
}
// methods 直接写
private countAdd (): void {
this.count ++
}
// Emit
private handlerChildValue (obj: object) {
console.log(obj)
}
}
</script>
index.vue 代码等同于
<script>
import Home from '../views/Home.vue'
export default {
components: { Home },
props: {
propA: {
type: String,
required: true,
default: 'propa'
},
propB: {
type: String
}
},
data () {
return {
menus: sessionMenus ? JSON.parse(sessionMenus) : [],
count: 0
}
},
watch: {
count: {
onChangeCount (newVal) {
console.log(newVal)
},
deep: true
}
},
computed: {
total () {
return this.count + 10
}
},
created () {
console.log(this.menus)
},
methods: {
countAdd () {
this.count ++
},
handlerChildValue (obj: object) {
console.log(obj)
}
}
}
</script>
子组件Child.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<a-button @click="backParent">子组件</a-button>
</div>
</template>
<script lang="ts">
import { Vue, Emit, Component } from 'vue-property-decorator'
@Component
export default class Home extends Vue {
// 写法一 emit()括号里不写函数名 函数名为驼峰 在父组件接收函数要采用(驼峰式会转为横杠式写法) return-parent
// @Emit()
// private returnParent (): object {
// return { msg: '我是子组件返回的对象' }
// }
// 写法二: 注意，这时父组件接收值时是用@Emit("returnParent")括号中的returnParent接收的，returnParent会把正面的方法名字覆盖。
// （treturnParent）是自定义的 在父组件接收函数要采用 returnParent驼峰
@Emit('returnParent')
private backParent (): object {
return { msg: '我是子组件返回的对象' }
}
}
</script>
Child.vue等同于
<script>
export default {
methods: {
backParent () {
this.$emit('returnParent', { msg: '我是子组件返回的对象' })
}
}
}
</script>
