@prop

子组件接收父组件传过来的参数:
参数名后面的“!:”是类型断言,就是告诉typescript我这里一定有值而且是正确的值,让他不要管了

  1. <script lang="ts">
  2. import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
  3. @Component({
  4. name: 'IndexList'
  5. })
  6. export default class extends Vue {
  7. @Prop({ default: () => [] }) private data!: [];//参数是数组
  8. @Prop({ default: () => {return {}} }) private data!: Object;//参数是对象,注意直接写成()=>{}会报错,原因未知
  9. @Prop({ default: 0 }) private total!: number;
  10. @Prop({ default: 1 }) private page!: number;
  11. @Prop({ default: 20 }) private pageSize!: number;
  12. @Prop({
  13. default: () => {
  14. return [10, 20, 50, 100]
  15. }
  16. })
  17. private pageSizes!: [];
  18. }
  19. </script>

@Emit

  1. <script lang="ts">
  2. import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
  3. @Component({
  4. name: 'IndexList'
  5. })
  6. export default class extends Vue {
  7. @Emit('update:page')
  8. private pageHandle(val: number) {
  9. return val // return将要传递的参数
  10. }
  11. private handleCurrentChange(val: number) {
  12. // this.$emit("update:page", val);直接调用这个也是生效的,原因未知
  13. this.pageHandle(val)//尽量使用这种方式触发emit
  14. }
  15. }
  16. </script>

@Watch

  1. <script lang="ts">
  2. import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
  3. @Component({
  4. name: 'IndexList'
  5. })
  6. export default class extends Vue {
  7. @Prop({ default: 1 }) private page!: number;
  8. @Watch('page', { deep: true })
  9. private onPageChange(value: number) {
  10. if (value === 1) this.pageNo = 1
  11. }
  12. }
  13. </script>