帝王谷资源网

Vue 兄弟组件通信的方法（不使用Vuex）
网络编程 2024/10/31 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

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

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

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

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

首先我们在 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>

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

子父：

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

父子：

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

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

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

标签：
Vue,兄弟组件通信,vue兄弟组件通信,vuex
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

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

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

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接