vue + typescript 父子组件传值记录

最新推荐文章于 2023-01-24 10:07:03 发布

weixin_33831196

最新推荐文章于 2023-01-24 10:07:03 发布

阅读量2.9k

点赞数 1

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/lpcysz/blog/3012905

版权

为什么80%的码农都做不了架构师？>>>

typescript 使用 vue-property-decorator 插件后组件通信做一个记录

1、父传子

父：

<step1 @reportId="reportIdEmit" :dataSourceList="dataSourceList"></step1>
// dataSourceList是父传给子组件的

子：

import { Component, Prop, Vue, Emit } from 'vue-property-decorator'

 @Component
 export default class sterp1 extends Vue {
    @Prop({}) dataSourceList!:any // 接收父组件传过来的数据
 }

2、子传父

子：

<script lang='ts'>
 import { Component, Prop, Vue, Emit } from 'vue-property-decorator'

 @Component
 export default class sterp1 extends Vue {

  @Emit('reportId') send (reportId:string) {} // 子传父方法 send方法用来处理传值的逻辑
 
  nextStep ():void { // 下一步
      (this as any).form.validateFields((err: any, values: any) => {
        if (!err) {
          this.send(values.reportId) // 子传父方法
        }
      })
  }

 }

</script>

父：

<step1 @reportId="reportIdEmit" :dataSourceList="dataSourceList"></step1>
// reportId是子组件传给父组件的值  reportIdEmit 是处理其的方法


// 方法
reportIdEmit (val:any):void { // step1 传过来的reportid
    console.log('父组件接收到的reportId' + val);
    this.reportId = val; // 接收子组件传过来的参数，用于第二步请求
}

转载于:https://my.oschina.net/lpcysz/blog/3012905