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 18 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
vscode下vue项目中eslint的使用方法
Jan 13 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 地址栏信息的获取代码
2009/01/07 PHP
php引用传值实例详解学习
2013/11/06 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
python错误处理详解
2014/09/28 Python
selenium+python实现自动登录脚本
2018/04/22 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Python和Bash结合在一起的方法
2020/11/13 Python
小学生期末自我鉴定
2014/01/19 职场文书
讲座主持词
2014/03/20 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
公司承诺书格式
2014/05/21 职场文书
高一地理教学工作总结
2015/08/12 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫