vue子传父多个值
子组件: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子传父多个值的更多相关文章
- vue子传父、父传子
子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...
- vue传参子传父
vue子传父用$emit实现 1.文件目录结构 2.parent父组件内容 <template> <div class="wrap"> <div> ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- Vue ---- 组价 组件化 子传父 父传子
目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...
- Blazor和Vue对比学习(基础1.4):事件和子传父
Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...
- Vue父子组件传值 | 父传子 | 子传父
父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- vue中子传父,父传子的具体用法
先说明下父组件Login,子组件signCon 子拿到父数据可以通过,在子组件里面设置props:['name']的方法拿到. 首先在父组件中定义数据了: data(){Englishname:'li ...
- Vue-组件传值:子传父和兄弟组件间常见的传值方式
前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...
随机推荐
- 一针见血tomcat
一针见血tomcat 一.Tomcat各组件认知 1 Tomcat架构说明 Tomcat是一个基于JAVA的WEB容器,其实现了JAVA EE中的 Servlet 与 jsp 规范,与Nginx ap ...
- Dubbo源码分析
Dubbo源码分析1 Dubbo源码分析2 dubbo源码阅读:rpc请求处理流程(1) 架构设计:系统间通信(17)——服务治理与Dubbo 中篇(分析) 13. Dubbo原理解析-注册中心之Zo ...
- leetcode85
class Solution { public int maximalRectangle(char[][] matrix) { if(matrix == null || matrix.length = ...
- Linux网络编程学习(六) ----- 管道(第四章)
1.管道的定义 管道就是将一个程序的输出和另外一个程序的输入连接起来的单向通道,比如命令: ls -l|more,就建立了一个管道,获取ls -l的输出作为more的输入,数据就沿着管道从管道的左边流 ...
- mysql_config_editor usage
# mysql_config_eidtor is a tool to create a profile file $HOME/.mylogin.cnf, in which you can store ...
- JS 正则表达式基本语法(精粹)
1.正则表达式基本语法 两个特殊的符号'^'和'$'.他们的作用是分别指出一个字符串的开始和结束. 例子如下: "^The":表示所有以"The"开始的字符串( ...
- spring boot+kafka整合
springboot版本是2.0.4 首先,在maven中引入spring-kafka的jar包 <dependency> <groupId>org.springframewo ...
- apt与apt-get命令的区别与解释
[apt与apt-get命令的区别与解释] Ubuntu 16.04 发布时,一个引人注目的新特性便是 apt 命令的引入.其实早在 2014 年,apt 命令就已经发布了第一个稳定版,只是直到 20 ...
- Python的基本用法
---恢复内容开始--- 一.函数 1.1 默认参数 想要计算一个数x的n次方,可以定义如下的函数.但是有时候我们仅仅只需要计算x^2,所以只想使用一个参数即power(x),这时如果仍用如下代码会报 ...
- 【python深入】单例模式
单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. 比如,某 ...