1、父传子 把要传入的值放到父标签里  子组件使用props接收

父写法

子写法

2、子传父

子组件：

childrenOnclick() {

  // 发布自定义事件

  this.$emit("back", "我来了")//第一个参数是父组件中v-on绑定的自定义回调方法，第二个参数为传递的参数
}
父组件
<children-item  v-on:back="handleParentClick"></children-item>

3、组件之间的通信

简单的通信使用vue实例解决，复杂的大型项目使用vuex状态管理。

1、新建一个vue实例来进行传递消息

   var vm = new Vue();

 2、组件一发送消息
  sendMsg: function () { //传参方法
    console.log(555);
   vm.$emit("eventBus","我是组件一");//定义方法名和要传输的数据
  }

 3、组件二接收消息
  receive:function () {
    vm.$on("eventBus",function (val) {  //接收组件二的参数
        console.log(val) //我是组件一
    })
  }

完整代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="app">

<child-component :message="msg" v-on:allback="updatea"></child-component>

<child-component2></child-component2>

</div>

<script>

    var vm = new Vue();

    //组件一  发送信息给父组件 、 接收组件二消息

    Vue.component('childComponent',{

        props:['message'],

        template: `<div @click="sendMsg">{{ message }}</div>`,

        data() {

            return{

                son:"我是你儿子"

            }

        },

        mounted(){

            this.receive()

        },

        methods:{

            sendMsg: function () { //传参方法

                console.log(555);

                this.$emit('allback', this.son); //第一个参数是父组件中v-on绑定的自定义回调方法，第二个参数为传递的参数

            },

            receive:function () {

                vm.$on("eventBus",function (val) {  //接收组件二的参数

                    console.log(val)

                })

            }

        }

    });

    //组件二 发送信息给组件一

    Vue.component('childComponent2',{

        props:['message'],

        template: `<div @click="sendMsg">告诉大哥</div>`,

        data() {  //为什么不能写成data:{} 报错

            return{

                twoson:"我是你弟弟"

            }

        },

        methods:{

            sendMsg: function () { //传参方法

                console.log(555);

               vm.$emit("eventBus",this.twoson);//定义方法名和要传输的数据

            }

        }

    });

    new Vue({

        el:'#app',

        data:{

            msg:"我是你爸爸"

        },

        methods:{

            updatea:function (msg) {

                console.log(6666)

                this.msg=msg

            }

        }

    })

</script>

</body>

</html>

　　

												


											
vue 组件之间相互传值  父传子 子传父的更多相关文章
	

    
								
  1. VUE中的子父组件、兄弟组件之间相互传值，相互调用彼此的方法
		
    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
    
		
    2. 
						
  2. vue组件之间的传值
		
    vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...
    
		
    3. 
						
  3. vue 组件之间互相传值：兄弟组件通信
		
    vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...
    
		
    4. 
						
  4. vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）
		
    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
    
		
    5. 
						
  5. vue组件之间互相传值：父传子，子传父
		
    今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...
    
		
    6. 
						
  6. EasyDSS RTMP流媒体服务器web前端：vue组件之间的传值,父组件向子组件传值
		
    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
    
		
    7. 
						
  7. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端：vue组件之间的传值，父组件向子组件传值
		
    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
    
		
    8. 
						
  8. vue父子组件之间相互传值
		
    1. 子组件使用父组件方法,并向父组件传值 子组件代码 <template> <div class="menu"> <div class=" ...
    
		
    9. 
						
  9. vue组件之间的传值方式
		
    一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MySQL中实现连续日期内数据统计,缺省天数0补全
			
    某一日,需要查询订单表中一个月每天的金额数 查询出数据如下: array(14) { [0] => array(2) { ["money"] => string(7)  ...
    
			
    2. 
						
  2. (转)Jmeter基础之编写HTTP接口用例
			
    使用Jmeter书写一个接口用例 第一:添加线程组 一.添加一个线程组,方法如下图所示: 二.配置线程组,如下图图所示: 需要填写名称,按需要修改线程数.等待时间和循环次数等:  第二:添加http请 ...
    
			
    3. 
						
  3. vs2015官方下载链接
			
    https://my.visualstudio.com/Downloads?q=visual%20studio%202015&wt.mc_id=o~msft~vscom~older-downl ...
    
			
    4. 
						
  4. java中进程与线程的区别
			
    进程是一个正在运行的应用程序.一个进程包含一个或多个线程.它可以是一段完整的代码或部分程序的动态执行.系统资源分配与调度的基本单位.而线程是CPU调度与运行的基本单位,它是一组指令的集合或是程序的特殊 ...
    
			
    5. 
						
  5. 线段树 HDU-1754 I Hate It
			
    附上原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某 ...
    
			
    6. 
						
  6. Docker下配置双机热备PXC集群
			
    架构: 步骤: 1.安装centos7   ,设置宿主机IP:192.168.1.224 2.先更新yum软件管理器,再安装docker 1.yum -y update 2.yum install - ...
    
			
    7. 
						
  7. 【SW4STM32生成 hex文件的设置方法】
			
    SW4STM32生成 hex文件的设置方法 开发环境:WIN7_64 + SW4STM32  联系方式:yexiaopeng1992@126.com 修改: 2018年1月21日 在这周,有一个热心的 ...
    
			
    8. 
						
  8. 【编程基础】C语言常见宏定义
			
    我们在使用C语言编写程序的时候,常常会使用到宏定义以及宏编译指令,有的可能比较常用,有的可能并不是很常用,是不是所有的C语言宏定义以及宏指令你都清楚呢? 指令 用途详细介绍 # 空指令,无任何效果 # ...
    
			
    9. 
						
  9. tab切换的效果——仿照今日头条APP的切换效果
			
    说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...
    
			
    10. 
						
  10. Linux替换文件内容sed命令
			
    sed -e 4a\newline testfile  //在第四行后添加一行,并将结果输出到标准输出.-e,以指定脚本处理文本文件:a,新增. nl /etc/passwd | sed '2,5d' ...
    
			
    11.