Vue 兄弟组件通信的方法(不使用Vuex)


Posted in Javascript onOctober 26, 2017

项目中,我们经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
JavaScript生成指定范围的时间列表
Mar 19 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 #Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 #Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 #Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 #Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 #Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 #Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 #Javascript
You might like
PHP下常用正则表达式整理
2010/10/26 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
基于Django静态资源部署404的解决方法
2019/07/28 Python
回门宴新郎答谢词
2014/01/12 职场文书
小学庆六一活动方案
2014/02/28 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
杨善洲观后感
2015/06/04 职场文书
西安事变观后感
2015/06/12 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
2019 入党申请书范文
2019/07/10 职场文书
k-means & DBSCAN 总结
2021/04/27 Python