Vue 兄弟组件通信的方法（不使用Vuex）

站长资源 2024/11/28 佚名

2 0 1

项目中，我们经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题，但在一些小型的项目中，我们就没有必要去引入vuex。下面简单介绍一下使用传统方法，实现父子组件通信的方法。

简单实例：我们在a组件中点击按钮，将信息传给b组件，从而使b组件弹出。

主要的思路就是：先子传父，在父传子

首先我们在 a.vue 组件中，给按钮botton绑定一个handleClick事件，事件中我们通过 this.$emit(）方法去触发一个自定义事件，并传递我们的参数。

示例中我们通过this.$emit() 去触发isLogFn 这个方法自定义事件，并将log 参数传递出去

a.vue

<template>
 <div class="adiv">
 <p>a组件</p>
 <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
 </div>
</template>

<script>

export default {
 methods: {
 handleClick () {
  this.$emit('isLogFn','log')
 }
 }
}
</script>

<style>
.adiv{
 width: 400px;
 height: 200px;
 border: 1px solid #000;
 margin: 0 auto;
}
</style>

第二步，我们要在父组件中去监听这个自定义事件，去触发对应的方法，并接受a组件传过来的参数。此时我们就完成了子组件向父组件传值的过程。

示例中，<aPage @isLogFn = "lisLogFn"></aPage> 监听isLogFn 去触发我们在父组件中定义的方法lisLogFn，并拿到传过来的 ‘log' 数据。完成子父传值。

到此，整个过程还没有结束，只是完成了一半。接下来我们要完成父子组件传值，将a组件的信息在传给b组件。

在< bPage > 标签中绑定islog 属性，动态绑定data中的login 字段,在我们通过lisLogFn 方法拿到 ‘data'之后，我们要判断 data 传过来的数据，根据判断结果去改变data（）中的数据，从而将数据传递给b组件

App.vue

<template>
 <div id="app">
 <aPage @isLogFn = "lisLogFn"></aPage>
 <bPage :isLog = "login"></bPage>
 </div>
</template>

<script>

import aPage from './components/a.vue'
import bPage from './components/b.vue'

export default {
 data () {
 return {
  login: 'false'
 }
 },
 name: 'app',
 components: {
 aPage,
 bPage
 },
 methods: {
 lisLogFn (data) {
  if (data == 'log') {
  this.login = 'true'
  }
 }
 }
}
</script>

<style>
</style>

最后，b组件中需要创建props，定义一个isLog 属性，这个属性就是我们传过来的数值。然后我们在计算属性中处理这个数据，最终供b组件使用。示例中，我们在v-show="isLogin" 中用来控制弹窗是否打开。

切记！不能直接使用这个props，一定要经过computed处理，原因我引用vue官方说明

单向数据流

b.vue

<template>
 <div class="bdiv" v-show="isLogin">我是组件B弹窗</div>
</template>

<script>
export default {
 props: ['isLog'],
 data () {
 return {

 }
 },
 computed: {
 isLogin () {
  if(this.isLog == 'true'){
  return true
  } else {
  return false
  }
 }
 }
}
</script>

<style>
 .bdiv{
 width: 200px;
 height: 200px;
 border: 1px #000 solid;
 margin: 0 auto;
 }

</style>

总结：想要实现兄弟组件传值，一定要首先熟悉子父，父子之间的传值。

子父：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

父子：

子组件在props中创建一个属性，用以接收父组件传过来的值
在子组件标签中添加子组件props中创建的属性，把需要传给子组件的值赋给该属性

文中示例 github 地址：https://github.com/enjoy-pany/vue-emit

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Vue,兄弟组件通信,vue兄弟组件通信,vuex

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Vue 兄弟组件通信的方法（不使用Vuex）”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

Vue 兄弟组件通信的方法（不使用Vuex）

javascript+html5+css3自定义弹出窗口效果

JS手机端touch事件计算滑动距离的方法示例

评论“Vue 兄弟组件通信的方法（不使用Vuex）”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接