VUE中组件之间的通信方式

已于 2022-08-04 17:21:16 修改
阅读量4.2k 收藏 34
点赞数 13
文章标签： vue
于 2022-04-15 12:56:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44810886/article/details/124191087
版权

目录

一、父子组件之间的通信方式

1.props+$emit()

3.$parent+$children

4.provide+inject

5.$attrs+$listeners

6.ref+$refs

二、兄弟组件之间的通信方式

1.子传值到父，再由父传值到子

2.事件总线

（备注视频代码学习来自：重要！父子组件通信的方式有哪几种？【Vue面试题】_哔哩哔哩_bilibili）

一、父子组件之间的通信方式

1.props+$emit()

1.父组件通过props向子组件传递数据（在子组件中用props接收）

2.子组件通过$emit()向父组件传递数据或事件，如在子组件中自定义事件changeMessage,携带信息'bye’, 然后在父组件中通过v-on监听这个事件

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>{{message}}</p>
    <child :message="message" @changeMessage="message =$event"> </child>
  </div>
</template>

<script>
import Child from "./child.vue"
export default {
  data () {
    return {
      message: 'hello'
    }
  },
  components: {
    Child
  },
  methods: {
    changeMeaasge () {
      this.message = 'Bye'
    }
  }
}
</script>

child.vue

<template>
  <div>
    <h1>孩子</h1>
    <p>{{message}}</p>
    <button @click="handleClick"> 按钮</button>
  </div>
</template>
<script>
export default {
  props: ['message'],
  methods: {
    handleClick () {
      this.$emit('changeMessage', 'Bye')
    }
  }
}
</script>

运行后如下，点击按钮，父亲孩子下面的hello都会变成bye。

                                            

2.通过回调函数（callback）

parent.vue（将changeMsgFn作为另外一个props传给子组件）

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>{{message}}</p>
    <child :message="message" :changeMsgFn="changeMeaasge"> </child>
  </div>
</template>
<script>
import Child from "./child.vue"
export default {
  data () {
    return {
      message: 'hello'
    }
  },
  components: {
    Child
  },
  methods: {
    changeMeaasge () {
      this.message = 'Bye'
    }
  }
}
</script>

 child.vue

<template>
  <div>
    <h1>孩子</h1>
    <p>{{message}}</p>
    <button @click="changeMsgFn"> 按钮</button>
  </div>
</template>
<script>
export default {
  props: ['message', 'changeMsgFn'],
}
</script>

3.$parent+$children

1.父组件通过$children访问子组件

2.子组件通过$parent访问父组件

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>{{message}}</p>
    <button @click="changeChildNumber">按钮</button>
    <child></child>
  </div>
</template>
<script>
import Child from "./child.vue"
export default {
  data () {
    return {
      message: 'hello'
    }
  },
  components: {
    Child
  },
  methods: {
    changeChildNumber () {
      this.$children[0].number = 50
    }
  }
}
</script>

 child.vue

<template>
  <div>
    <h1>孩子</h1>
    <p>{{number}}</p>
    <p>{{parentMessage}}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      number: 10
    }
  },
  computed: {
    parentMessage () {
      return this.$parent.message
    }
  }
}
</script>

                  (点击按钮后子组件中的数据10变为50）

4.provide+inject

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <child></child>
  </div>
</template>
<script>
import Child from "./child.vue"
export default {
  components: {
    Child
  },
  provide: {
    message: 'Hello'
  }
}
</script>

 child.vue

<template>
  <div>
    <h1>孩子</h1>
    <p>{{message}}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

                                                             

5.$attrs+$listeners

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
    <child :name="name" :age="age" @changeName='changeName'></child>
  </div>
</template>
<script>
import Child from "./child.vue"
export default {
  components: {
    Child
  },
  data () {
    return {
      name: 'pipi',
      age: 1
    }
  },
  methods: {
    changeName () {
      this.name = 'wuyi'
    }
  }
}
</script>

child.vue

<template>
  <div>
    <h1>孩子</h1>
    <button @click="$listeners.changeName">按钮</button>
    <grand-child v-bind="$attrs"></grand-child>
  </div>
</template>
<script>
import GrandChild from './GrandChild.vue'
export default {
  components: {
    GrandChild
  }
}
</script>

GrandParent.vue

<template>
  <div>
    <h1>孙子</h1>
    <p>姓名：{{$attrs.name}}</p>
    <p>年龄：{{$attrs.age}}</p>
  </div>
</template>
<script>
export default {
}
</script>

                                                  

6.ref+$refs

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <child ref="childComp"></child>
    <button @click="changeName">按钮</button>
  </div>
</template>
<script>
import Child from "./child.vue"
export default {
  components: {
    Child
  },
  methods: {
    changeName () {
      console.log('点击前', this.$refs.childComp.age);
      this.$refs.childComp.changeAge();
      console.log('点击后', this.$refs.childComp.age);
    }
  }
}
</script>

  child.vue

<template>
  <div>
    <h1>孩子</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      age: 20
    }
  },
  methods: {
    changeAge () {
      this.age = 50;
    }
  }
}
</script>

                                                

每种通信方式还需要继续学习，各自优缺点局限性等....

二、兄弟组件之间的通信方式

1.子传值到父，再由父传值到子

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>name：{{name}}</p>
    <hr>
    <child11 :name="name" @ChildOneClick="handleParentClick" />
    <hr>
    <child22 :name="name" />
  </div>
</template>

<script>
import child11 from './child11.vue'
import child22 from './child22.vue'

export default {
  data () {
    return {
      name: 'pipiwuyi'
    }
  },
  methods: {
    handleParentClick (name) {
      this.name = name;
    }
  },
  components: {
    child11,
    child22,
  },
}
</script>

child11.vue

<template>
  <div>
    <h1>孩子1</h1>
    <p>name:{{name}}</p>
    <button @click="handleChildOneClick">按钮</button>
  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  methods: {
    handleChildOneClick () {
      this.$emit('ChildOneClick', 'hui')
    }
  }
}
</script>

 child22.vue

<template>
  <div>
    <h1>孩子2</h1>
    <p>name:{{name}}</p>

  </div>
</template>

<script>

export default {
  props: ['name']
}
</script>

                                                           

2.事件总线

new一个新的vue实例并导出，子组件都引入，子组件1$emit出去，子组件2$on监听

main.js

import Vue from 'vue'
import App from './App.vue'

export const eventBus = new Vue(); //创建实例,并导出

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>name：{{name}}</p>
    <hr>
    <Child1 :name="name" @ChildOneClick="handleParentClick" />
    <hr>
    <Child2 :name="name" />
  </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

export default {
  data () {
    return {
      name: 'pipiwuyi'
    }
  },
  methods: {
    handleParentClick (name) {
      this.name = name;
    }
  },
  components: {
    Child1,
    Child2,
  },
}
</script>

child1.vue

<template>
  <div>
    <h1>孩子1</h1>
    <p>name:{{myName}}</p>
    <button @click="handleChildOneClick">按钮</button>
  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  data () {
    return {
      myName: this.name
    }
  },
  methods: {
    handleChildOneClick () {
      // this.$emit('ChildOneClick', 'hui')
      this.myName = 'hui';
      eventBus.$emit('ChildOneClick', 'hui')//eventBus是vue的实例，存在$emit的方法
    }
  }
}
</script>

child2.vue

<template>
  <div>
    <h1>孩子2</h1>
    <p>name:{{myName}}</p>

  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  data () {
    return {
      myName: this.name
    }
  },
  created () {
    eventBus.$on('ChildOneClick', (name) => {
      this.myName = name;
    })
  }
}
</script>

点击按钮，两个子组件中的内容改变，父组件中不变 

大肥妹
关注
  • 13
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE组件之间通信大全（9种）
weixin_40800275的博客
06-26 886
在实际研发过程中，我们会将页面分解，放在中。这个时候组件之间通信在所难免！如何进行组件通信？子组件如何使用父组件的元素？父组件如何获取子组件的数据？隔代组件如何通信？兄弟组件之间如何通信？任意组件之间如何共享数据？等等。本文共讲解了VUE中9种组件通信/数据共享方式，并提供。方式1：defineProps（父传子、子传父）父组件中使用变量形式传给子组件、子组件1.1 父组件代码1.2 子组件代码用defineProps 直接接收父类传来的值、对象、方法等1.3 效果展示。
Vue组件通信——父子组件通信的四种方法
weixin_44001906的博客
07-13 1万+
引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from '@/views/components/ChildrenDemo' Vue.component('ChildrenDemo',ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)，第二个参数：引入的组件名（一般都与组件名保持一致） 之后就可以全局使用组件了 局部引入 在父组件中引入 import ChildrenDemo from '@/views/components/Ch
超详细的vue组件之间通讯的8种方式
weixin_70134200的博客
07-11 5709
想要深入了解 vue 组件之间的通讯，这一篇文章足矣，里面详细讲解了组织之间通讯的8种方式，一篇文章即可掌握组件通讯。
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
Vue组件间通信的几种方式
DZQ1223的博客
06-27 959
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：父子组件通信；兄弟组件通信；跨级组件通信根据以上对这7种组件间的通信方法，可以将不同组件间的通信分为4种类型：父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信父子组件间通信子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
【Vue】父组件子组件的通信方式20种（全网最全总结）
慕白Lee的博客
07-11 8952
目录Props：父组件向子组件传递数据，子组件通过props属性接收数据父组件：子组件：$emit和$on：子组件向父组件传递数据，子组件通过$emit触发事件，父组件通过$on监听事件并接收数据。父组件：子组件：$parent和$children：父组件向子组件传递数据，父组件通过$children获取子组件实例并调用子组件方法传递数据。父组件：子组件：$attrs和$listeners：父组件向子组件传递属性和事件，子组件通过$attrs获取属性，通过$listeners获取事件并绑定在子组件上。父组件
超详细 vue组件通信的10种方式
鹏多多的博客
02-08 5882
vue：超级详细，项目常用的十种组件通信方式
详解Vue组件之间通信的七种方式
10-17
主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue父子组件之间的通信实例详解
10-17
除了以上方法，Vue 还提供了其他组件通信的方式，如使用事件总线（Event Bus）、Vuex 状态管理库等。对于更复杂的跨级组件通信，可以创建一个全局的事件总线，或者当多个组件需要共享状态时，使用 Vuex 进行集中式...
vue2.0组件之间传值、通信的多种方式(干货)
01-21
这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/...
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 ...在 Vue 中，父组件向子组件通信的方法还有其他方式，例如使用 $emit 和 $on 事件、使用 Vuex 等状态管理库。但是，使用 props 和 v-bind 指令是最常见和最简单的方法。
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式 在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的数据传输。下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间...
Vue 父子组件应用指南：从基础到实战
weixin_43749805的博客
06-14 3943
Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。其中，父子组件的概念是 Vue 开发中非常重要的一部分。本文将介绍如何使用 Vue 创建父子组件，并通过代码来分析实际应用。
Vue实现组件间通信的11种方式
xxx
06-29 2151
组件之间的通信是指不同组件之间在共享数据、传递消息或触发事件等方面进行交流和协作的过程。在应用程序中，不同的组件可能需要相互传递数据、共享状态、触发动作或响应事件等，以实现组件之间的协调和交互。: useAttrs是 Vue 3 中提供的一个 Composition API，用于获取组件上未声明为props的属性。这些通信方式可以根据应用程序的需求和复杂性进行选择和组合使用，以实现组件之间的有效通信和协作。原文合集地址如下，有需要的朋友可以关注。
VUE组件间通信的七种方式
最新发布
宝子的博客
11-04 1696
根据以上对这6种组件间的通信方法，可以将不同组件间的通信分为4种类型：父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信。
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3969
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue中组件互相通信几种方式
qq_63140280的博客
07-01 367
vue中的组件传值的方法
深度理解Vue组件的子组件向父组件传递数据的通信方式，全面详细，看这一篇就够了，推荐收藏
czjl6886的博客
11-28 1万+
深度理解Vue组件的子组件向父组件传递数据的通信方式：Vue子组件向父组件传递数据的通信方式有很多，我这里列举了三种，全面详细，看这一篇就够了，推荐收藏！
vue3 组件之间通信
06-06
在 Vue3 中，组件之间的通信可以通过以下方式进行： 1. Props & Emit：通过Props将数据从父组件传递到子组件，在子组件中通过Emit触发事件传递数据给父组件...在使用组件通信方式时，需要根据具体情况选择合适的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值