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

vue + typescript 父子组件传值记录相关推荐

Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...
父子组建传值_详解Vue之父子组件传值
一.简要介绍父子组件之间的传值主要有三种:传递数值.传递方法.传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍: (一)传递数值 1.子组件:Header.vue {{msg}} ...
vue中非父子组件传值
vue中非父子组件传值我们使用 $emit发送数据使用 $on监听数据vue非父子组件传值1 创建公共实例化对象const bus=new Vue()2 在需要发送数据的组件中自定义方法使用bus ...
Vue非父子组件传值
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.非父子组件传值二.事件总线 2.$attrs / listeners VueX是笔者认为最稳定的非父子传值的方法 ...
关于Vue非父子组件传值
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
六十一、Vue中父子组件传值和组件参数校验
@Author:Runsen @Date:2020/10/17 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的日积月累,需要强大 ...
Vue非父子组件传值+案例cnode首页
1. 创建公共实例化对象 const bus=new Vue() 2. 在需要发送数据的组件中绑定事件使用 bus.$emit发送数据 <button @click="send&q ...
[Vue]非父子组件传值(bus/总线/观察者模式/发布订阅模式)
核心: 在vue原型中挂载vue实例通过this.bus.$emit('事件名', '参数')向外触发事件和传递参数在生命周期函数mounted中,通过this.bus.$on('传递出来的事件名 ...
vue父子组件传值之异步之后子组件无法拿到父组件传的值
在vue中父子组件传值是非常常见的,父组件给子组件传值使用的是props,子组件给父组件传值使用的是$emit 但是今天就不详细的介绍父子组件之间传值,在这里我们介绍的是子组件在异步请求回来的参数无法 ...

vue + typescript 父子组件传值记录

vue + typescript 父子组件传值记录相关推荐

最新文章

热门文章