在 vue 中使用 ts 时,有一句常见的代码
import { Component, Vue } from 'vue-property-decorator'
vue-property-decorator 是 vue 中封装装饰器的插件,其中有哪些装饰器呢?装饰器首字母大写
@Component
@Watch
@Prop
@Model
@Emit
(一)vue 的组件中使用 ts 以及 watch 装饰器的使用
<template>
<div>
<City />
{
{ name }} -- {
{ age }}
<button @click="changeAge">绑定事件</button>
{
{ this.info }}
</div>
</template>
<script lang="ts">
// 在 vue 装饰器类库中引入需要的装饰器
import { Component, Vue, Watch } from 'vue-property-decorator'
import City from '@/components/City.vue'
@Component({
name: 'Test', // 组件名称
components: { // 需要的子组件
City
}
})
class Test extends Vue {
// 组件的数据 相当于 data(){}
private name: string = 'zfb'
protected age: number = 18
// methods 中的方法
changeAge () {
this.age = 23
}
// computed 计算属性 set/get
set info (val: {
name: string,
age: number
}) {
this.age = val.age
this.name = val.name
}
get info () {
return {
name: this.name,
age: this.age
}
}
// watch 装饰器数据监听
// 想要监听哪个变量 就把名字写watch里
// 然后定义一个监听函数
@Watch('age')
ageChange (newValue: number, oldValue:number) {
console.log(newValue, oldValue) // 23 18
}
// 生命周期与之前一样
created () {
console.log(11)
}
}
export default Test
</script>
<style scoped>
</style>
(二)Prop 装饰器、Emit 装饰器
父组件:
<!-- template -->
<Test :userInfo="userInfo" @changeAge="changeAge" @noParams="noParams" />
// js
class Index extends Vue {
// 组件的数据 相当于 data(){}
protected userInfo: {
userName: string,
age: number,
sex: string
} = {
userName: 'zfb',
age: 23,
sex: '女'
}
// methods 中的方法
changeAge (value:number) {
this.age = value
}
noParams () {
console.log(1)
}
}
export default Index
子组件:
<template>
<div>
{
{ userInfo.userName }}
{
{ userInfo.age }}
{
{ userInfo.sex }}
<button @click="changeAgeChild">传参数</button>
<button @click="childNoParams">不传参数</button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator'
@Component
class Test extends Vue {
// Prop 接受伏组件传过来的值 里面传一个对象 指定默认值default还有类型type
// !: 表示取消定义未赋值的报错
@Prop({ default: {}, type: Object }) userInfo!:Object
// Emit 装饰器要调父组件传过来的哪个方法,就把方法名当参数传进去
// 而自组件方法 return 的值 是传递给父组件方法的参数!!
// 45 是调用父组件方法的传参数
@Emit('changeAge')
changeAgeChild () {
return 45
}
// 调用父组件方法 不传参数
@Emit('noParams')
childNoParams () {}
}
export default Test
</script>
<style>
</style>
(三)Model 装饰器:
子组件 修改 父组件 v-model 的值
<template>
<div>
<!-- template -->
{
{ inputValue }}
<Test v-model="inputValue" />
</div>
</template>
<script lang="ts">
// 在 vue 装饰器类库中引入需要的装饰器
import { Component, Vue, Watch } from 'vue-property-decorator'
import Test from '@/components/Test.vue'
@Component({
name: 'Index', // 组件名称
components: { // 需要的子组件
Test
}
})
class Index extends Vue {
private inputValue:string = ''
}
export default Index
</script>
<style scoped>
</style>
子组件:
<template>
<div>
<input :value="inputValue" @input="onChangeValue">
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit, Model } from 'vue-property-decorator'
@Component
class Test extends Vue {
@Model('changeInputValue', { type: String, default: '' })
inputValue!:string
@Emit('changeInputValue')
onChangeValue (e:any) {
return e.target.value
}
}
export default Test
</script>
<style>
input {
border: 1px solid black;
}
</style>