vue + typescript 父子组件传值记录

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

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

1、 父传子

父：

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

子：

import { Component, Prop, Vue, Emit } from 'vue-property-decorator'@Componentexport default class sterp1 extends Vue {@Prop({}) dataSourceList!:any // 接收父组件传过来的数据}

2、子传父

子：

<script lang='ts'>import { Component, Prop, Vue, Emit } from 'vue-property-decorator'@Componentexport 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 传过来的reportidconsole.log('父组件接收到的reportId' + val);this.reportId = val; // 接收子组件传过来的参数，用于第二步请求
}

 

 

 

 

 

 

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