整理vue组件间传值方法（父子组件、兄弟组件）

﹏ヽ暗。殇╰゛Y 2021-11-01 16:24 385阅读 0赞

重新整理记录一下vue组件间传值的方法，包括父传子、子传父、兄弟间互传。

### 1.父组件向子组件传值 ###

*  父组件通过自定义属性向子组件传值

<Children :toChildren="rowData"></Children>
    
    export default{ 
    	data(){ 
    		return{ 
    			rowData: false
    		}
    	}
    }

*  子组件自定义一个属性接收值

export default{ 
    	props: { 
    		toChildren: { 
    			type: Boolean,
    			default: false
    		}
    	}
    }

注意：由父组件传过来的 toChildren，在子组件中不能更改

### 2.子组件向父组件传值 ###

*  子组件定义一个事件传值

methods: { 
    	handle(){ 
    		this.$emit('to-parent', this.rowData);
    	}
    }

*  父组件通过自定义事件绑定一个方法来接收值

<Children @to-parent="getChildData($event)"></Children>
    
    methods: { 
    	getChildData(data){ 
    		this.getData = data; //把值赋给了getData，就可以使用了
    	}
    }

### 3.组件间传值 ###

*  新建一个js文件作为组件间传值的中转站，命名为bus.js

import Vue from 'vue';
    export default new Vue;

*  组件1 先传值到bus

import bus from '../../../libs/bus'; //记得先引入bus
    
    methods: { 
    	datatoBrother(){ 
    		bus.$emit('toBrother', this.rowData);
    	}
    }

*  组件2 从bus接收值

import bus from '../../../libs/bus'; //记得先引入bus
    
    methods: { 
    	getBrotherData(){ 
    		bus.$on('toBrother', (data)=>{ 
    			this.getData = data; //把值赋给了getData，就可以使用了
    		});
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，385人围观）

还没有评论，来说两句吧...

相关阅读

相关 [vue] 父子组件间传值

境说明: vue 3.x + ant-vue 父组件(Album.vue)使用: <template> <div> <a-butt...

「爱情、让人受尽委屈。」/ 2024年04月17日 20:25/ 0 赞/ 108 阅读

相关 Vue组件化之父子组件传值

一、前言作为国内使用较多的前端框架——Vue，作为一名开发人员是必须要掌握的，小编作为一名后端人员。由于公司前端人员不足，也是学起来了Vue！框架的精髓就在于，组件

我就是我/ 2023年10月09日 18:12/ 0 赞/ 81 阅读

相关 vue各类组件间传值方法(父子、兄弟、页级)

熟悉vue各类关系的组件之间传值方法会令开发更加得心应手，下面将对父子、兄弟、页级组件之间的传值作浅谈。一、父子关系组件 - 父向子组件传值父组件向子组件传值通

灰太狼/ 2023年07月07日 08:49/ 0 赞/ 24 阅读

相关 Vue组件通信（父子组件传值，非父子组件传值）

主要是整理给自己用的一些面试常用题，这里记录一下vue组件间通信几种方式。父组件传值到子组件（父传子）先定义一个子组件，这里我在component文件夹里定义一个c

电玩女神/ 2023年06月23日 02:56/ 0 赞/ 192 阅读

相关 Vue兄弟组件间传值之 get传值

第一步：在新建的views目录下创建如下所示的两个组件： News.vue <template> <div> <h2>{

太过爱你忘了你带给我的痛/ 2022年12月23日 00:34/ 0 赞/ 243 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 357 阅读

相关 vue非父子组件、兄弟组件之间的传值通信

一般来说在vue项目里面的父、子组件间的传值很容易理解，父传子无非就是在子组件里面用`props`来显示的声明父组件传递的属性，例如：子组件： <!--这是子组件

快来打我*/ 2022年10月17日 00:48/ 0 赞/ 258 阅读

相关 vue父子组件间传值

子组件 <template> <div class="confirm_button"> <el-button type="primar

你的名字/ 2022年10月02日 11:50/ 0 赞/ 326 阅读

相关整理vue组件间传值方法（父子组件、兄弟组件）

重新整理记录一下vue组件间传值的方法，包括父传子、子传父、兄弟间互传。 1.父组件向子组件传值父组件通过自定义属性向子组件传值 <Children

﹏ヽ暗。殇╰゛Y/ 2021年11月01日 16:24/ 0 赞/ 386 阅读

相关 vue 兄弟组件传值

在vue开发中总会遇到组件传值问题，今天总结一下兄弟组件之间的传值方法。 1、子传父，父传子 2、vuex 3、eventBus 接下来介绍如何使用eventBus实现

た入场券/ 2021年09月04日 06:55/ 0 赞/ 451 阅读