子组件:this.$emit("methdosName",data1,data2,data3)

父组件: <child @methodsName="xxx(arguments)"></child>

例子:

子组件:

<template>
<div>
<button @click="trans()">点击传值</button>
</div>
</template>
<script>
export default {
name: "Chile",
data () {
return {
data:"123",
data2:[1,2,3],
data3:{
test:"123"
}
};
},
methods:{
trans(){
this.$emit("transdata",this.data,this.data2,this.data3);
}
}
}
</script>
<style lang="css" scoped>
</style>

父组件:

<template>
<div>
<child @transdata="getValue(arguments)"></child>
<span v-for="(item,i) in parentData">{{item}}</span>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
name: "Parent",
components:{
Child
},
data () {
return {
parentData:"父组件"
};
},
methods:{
getValue(data){
this.parentData = data;
}
}
}
</script>
<style lang="css" scoped>
</style>

vue子传父多个值的更多相关文章

  1. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  2. vue传参子传父

    vue子传父用$emit实现 1.文件目录结构 2.parent父组件内容 <template> <div class="wrap"> <div> ...

  3. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  4. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  5. Blazor和Vue对比学习(基础1.4):事件和子传父

    Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...

  6. Vue父子组件传值 | 父传子 | 子传父

    父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...

  7. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  8. vue中子传父,父传子的具体用法

    先说明下父组件Login,子组件signCon 子拿到父数据可以通过,在子组件里面设置props:['name']的方法拿到. 首先在父组件中定义数据了: data(){Englishname:'li ...

  9. Vue-组件传值:子传父和兄弟组件间常见的传值方式

    前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...

随机推荐

  1. 转:细说ASP.NET Windows身份认证

    转自:https://www.cnblogs.com/fish-li/archive/2012/05/07/2486840.html 细说ASP.NET Windows身份认证 阅读目录 开始 认识A ...

  2. 残差神经网络与inception-resnet

    一.基本概念 Residual Connection: 本质是“短路连接” 如下图阴影部分,通过增加shortcuts,加速训练,从而可以训练出更深的模型(I.R.v2 > Inception ...

  3. ffmpeg 编译

    下载FFmpeg git clone https://git.ffmpeg.org/ffmpeg.git 配置编译FFmpeg ./configure --prefix=host --enable-s ...

  4. 经典技术之URL

    SpringBoot入门 (十) 发送邮件 图表算法—最短路径 三个好用的并发工具类 跨应用Session共享: https://www.cnblogs.com/websharing/p/849586 ...

  5. c# 对DataTable进行分组group by

    ]);//对索引为0的一列进行分组,结果是集合

  6. BZOJ 1257: [CQOI2007]余数之和

    1257: [CQOI2007]余数之和 Time Limit: 5 Sec  Memory Limit: 128 MB Description 给出正整数n和k,计算j(n, k)=k mod 1 ...

  7. ORA-03137: TTC 协议内部错误: [12333] [4] [49] [51] [] [] [] []

    [1]问题背景:Oracle数据库版本为11.2.0.1,操作系统CentOS release 5.9,详细的报错信息如下: Dump file /data/oracle/diag/rdbms/db0 ...

  8. 安装grid时找不到ASM共享磁盘

    1.安装ORACLE数据库集群软件grid时找不到共享磁盘,如下图: 2.网上找过有各种说法,但此处小编的解决方案是:通过重新安装软件:oracleasmlib-2.0.4-1.el6.x86_64. ...

  9. gopath环境变量设置

    #在国内镜像下载二进制包 wget -c  http://www.golangtc.com/static/go/go1.4.1.linux-amd64.tar.gz tar -C /usr/local ...

  10. css学习2

    1.垂直居中 -父元素高度确定的单行文本: 设置父元素的 height 和 line-height  高度一致来实现的.(height: 该元素的高度:line-height: 行高(行间距),指在文 ...