vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:
一、如果两个组件用友共同的父组件,即
FatherComponent.vue代码
<template>
<child-component1/>
<child-component2/>
</template>
此时需要组件1给组件2传递某些参数,实现如下:
1、父组件给组件1绑定一个方法,让组件1进行回调,组件2接收某个属性,通过改变父组件的数据从而实现组件2的属性值的更新,即
父组件
<child-component1 :callback="child1Callback" />
<child-component2 :props="child2Props" />
data () {
return {
child2Props: '';
}
}
child1Callback ([args...]) {
// 此处更新了父组件的data,使组件2的属性prop改变
this.child2Props = [args...]
}
组件1
props: ['callback']
change () {
this.callback([args...])
}
2、通过bus进行实现,首先bus.js如下
const bus = new Vue()
export default bus
组件1
import bus from './bus'
methods: {
change () {
bus.$emit('callComponent2', [args...])
}
}
组件2
import bus from './bus'
mounted () {
bus.$on('callComponent2', function ([args...]) {
// 做你想做的
})
}
3、利用vuex实现,创建store.js相当于某些全局变量,但是可以被vue检测到变化
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
pageNo: 0
},
mutations: {
'change' (state, [args...]) {
state.pageNo++
}
}
})
export default store
项目入口js
import store from './store.js'
new Vue({
...
store: store
...
})
此时在任意vue文件都可以改变pageNo的值,并且会影响到所有使用了pageNo的组件,都会进行更新
childComponent1.vue
this.$store.commit('change')
childComponent2.vue
{{this.$store.state.pageNo}}
总结:
1、第一种比较绕,需要有共同的父组件,如果组件间层级太多,会导致代码混乱,比较难维护。
2、第二种比较直观,推荐使用,但是要理解,请仔细阅读官方文档
3、利用vuex在很多项目中都会显得杀鸡用牛刀,虽然更好理解,但是也带来了学习成本,并且可能会有一些副作用,但是如果项目比较复杂,利用vuex更加直观
综合各种方法的优缺点,推荐使用第二种,项目过于复杂请使用第三种
如果有更好的方法,请留言指教,谢谢
原文地址:https://segmentfault.com/a/1190000012555128
vue非父子组件间传参问题的更多相关文章
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
随机推荐
- python--csv文件读写
最近刚注册了kaggle账号,练习了下简单的knn算法用于手写数字识别.下载的训练和测试文本都是使用csv文件存储的,所以在此重拾下csv模块. csv文件 csv全称(Comma-Separated ...
- "随笔"列表 - 按时间先后顺序排列
这是一个测试 linux采用scp命令拷贝文件到本地,拷贝本地文件到远程服务器 美化博客园 virtual box虚拟机在linux下设置共享文件夹 纯净版linux (debian)挂载Virtua ...
- PHP实现的毫秒定时器,同时解决进程不重复堆积
定时器任务,在WEB应用比较常见,如何使用PHP实现定时器任务,大致有两种方案:1)使用Crontab命令,写一个shell脚本,在脚本中调用PHP文件,然后定期执行该脚本:2)配合使用ignore_ ...
- 紫书 例题8-2 UVa 11605(构造法)
这道题方法非常的巧妙, 两层的n*n, 第一层第I行全是第I个国家, 第二层的第j列全是第j个国家.这样能符合题目的条件.比如说第1个国家, 在第一层的第一行全是A, 然后在第二层的第一行就有ABCD ...
- 疯狂Java学习笔记(70)-----------挚爱Java
与大家分享! 挚爱Java 10个使用Java最广泛的现实领域 写好Java代码的30条经验总结 Java字符串的substring真的会引起内存泄露么? Java内存的原型及工作原理深度剖析 Jav ...
- Genymotion出现Installation error: INSTALL_FAILED_CPU_ABI_INCOMPATIBLE错误解决方法
今天在Genymotion上执行曾经的一个项目(libs中有多个SDK和so文件)时,出现下面错误: Console控制台中:Installation error: INSTALL_FAILED_CP ...
- yqj2065经典语录
在上课时.博客中和<编程导论(Java)>书中,yqj2065说过一些简短的话.列举一些玩玩. 假设您在我的博客中看见好玩的,最好还是推荐一下. 持续加入中... 1. "噢姐姐 ...
- Mosquito的优化——epoll优化(七)
本文由逍遥子撰写,转发请标注原址: http://blog.csdn.net/houjixin/article/details/46413583 或 http://houjixin.blog.163. ...
- java中的system.out.println()和JSP中out.println()差别
out.println()输出到client. 在out.println()中,out是response的实例.是以response为对象进行流输出的,即将内容输出到client.假设在JSP ...
- Linux Yum 命令使用举例
转自:https://blog.csdn.net/u012359618/article/details/51199309/ 本文给大家讲解Yum的使用15个范例: Yum软件包管理方式,在Red Ha ...