@prop
子组件接收父组件传过来的参数:
参数名后面的“!:”是类型断言,就是告诉typescript我这里一定有值而且是正确的值,让他不要管了
<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
@Component({
name: 'IndexList'
})
export default class extends Vue {
@Prop({ default: () => [] }) private data!: [];//参数是数组
@Prop({ default: () => {return {}} }) private data!: Object;//参数是对象,注意直接写成()=>{}会报错,原因未知
@Prop({ default: 0 }) private total!: number;
@Prop({ default: 1 }) private page!: number;
@Prop({ default: 20 }) private pageSize!: number;
@Prop({
default: () => {
return [10, 20, 50, 100]
}
})
private pageSizes!: [];
}
</script>
@Emit
<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
@Component({
name: 'IndexList'
})
export default class extends Vue {
@Emit('update:page')
private pageHandle(val: number) {
return val // return将要传递的参数
}
private handleCurrentChange(val: number) {
// this.$emit("update:page", val);直接调用这个也是生效的,原因未知
this.pageHandle(val)//尽量使用这种方式触发emit
}
}
</script>
@Watch
<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
@Component({
name: 'IndexList'
})
export default class extends Vue {
@Prop({ default: 1 }) private page!: number;
@Watch('page', { deep: true })
private onPageChange(value: number) {
if (value === 1) this.pageNo = 1
}
}
</script>