Vue 兄弟组件通信的方法(不使用Vuex)
项目中,我们经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java线程状态详解
- 设计模式~命令模式
- 基于DelayQueue实现的带失效时间的缓存
- 基于AQS实现的简单的Semaphore
- 图解:基于B+树索引结构,MySQL可以这么优化
- Android开发笔记:Retrofit + OkHttp3 + coroutines + LiveData打造一款网络请求框架
- Nginx安装与使用
- 基于Redis实现分布式锁
- 通过简单代码示例了解七大软件设计原则
- Flink在新浪微博的在线机器学习和实时数据分析
- Nginx + Keepalived使用文档
- 22+ 高频实用的 JavaScript 片段 (2020年)
- 文件上传C:fakepath解决方案
- Asp.net web api部署在某些服务器上老是404
- Spring解决循环依赖的思路