vue如何实现兄弟组件间值传递

逃离我推掉我的手 2022-05-29 02:57 184阅读 0赞

vuex是状态管理仓库，可实现组件间数据共享，但vuex适合大型项目应用，用于小项目过于繁琐。那么vue如何实现兄弟组件数据共享呢？  
可借助父子组件间值传递方法，实现原理是：**子传父，父传子**。  
这里我们用例子来简单介绍下：

**子组件传值给父组件**：  
子组件通过触发父组件事件传值给父组件，子组件child1.vue代码：

<template>
        <div>
            <h3>子组件child1，把值传递给父组件</h3>
            <p><button @click="postData">点击传值给父元素</button></p>
        </div>
    </template>
    <script> export default{ data(){ return { message : '子组件1的data' } }, methods:{ postData: function(){ this.$emit("parentEvent",this.message) } } } </script>

**父组件传值给子组件：**

父组件通过props传值给子组件，子组件child2.vue代码：

<template> <div> <h3>子组件child2,通过父组件获取子组件child1的值</h3> <p>{ { message}}</p> </div> </template> <script> export default{ props: ['message'], data(){ return{} }, methods:{ } } </script>

父组件代码：

<template> <div id="app"> <h1>{ { msg }}</h1> <h1>父页面</h1> <child1 @parentEvent="getData"></child1> <child2 :message="msg"></child2> </div> </template> <script> import child1 from './child1' import child2 from './child2' export default { name: 'app', components: { child1, child2 }, data () { return { msg: 'Welcome to Your Vue.js App' } }, methods:{ getData:function(data){ this.msg = data; } } } </script>

发表评论取消回复

表情：

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

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

相关阅读

相关 vue兄弟组件传值（vue兄弟组件通讯，vue同级组件传值通讯，vue兄弟组件通讯传值常用的两种方式，超详细）

简介: 兄弟组件，就是同级别的组件⭐ 第一种： EventBus方法首先在main.js文件中定义一个新的bus对象，然后挂载在原型链上，生成一个全新的Vue实

怼烎@/ 2023年10月03日 22:54/ 0 赞/ 15 阅读

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

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

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

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

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

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

相关 Vue兄弟组件间传值之事件总线

第一步：在src/utils目录下创建文件bus.js // 专门用来传递传递消息 import Vue from 'vue' expo

心已赠人/ 2022年12月22日 12:28/ 0 赞/ 203 阅读

相关兄弟组件间通信

<!DOCTYPE html> <html> <head> <title></title> <script type="text/j

阳光穿透心脏的1/2处/ 2022年06月02日 12:12/ 0 赞/ 229 阅读

相关 vue如何实现兄弟组件间值传递

vuex是状态管理仓库，可实现组件间数据共享，但vuex适合大型项目应用，用于小项目过于繁琐。那么vue如何实现兄弟组件数据共享呢？可借助父子组件间值传递方法，实现原理是

逃离我推掉我的手/ 2022年05月29日 02:57/ 0 赞/ 185 阅读

相关 VUE：兄弟组件间传参

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 1、定义一个中间 eventBus.js ，只有

刺骨的言语ヽ痛彻心扉/ 2022年03月26日 06:58/ 0 赞/ 813 阅读

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

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

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

相关 vue 兄弟组件传值

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

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

相关 vue 自定义事件兄弟组件间通信

首先 vue 实例有event对象可以实现自定义事件，实现兄弟组件间通信。项目结构：event.js 导出vue实例对象 Input.vue 和 list.vue

阳光穿透心脏的1/2处/ 2021年08月31日 00:18/ 0 赞/ 424 阅读