关于Vue组件间的常用传参方式
更新时间：2022年09月06日 09:20:11 作者：Tangctt
这篇文章主要介绍了关于Vue组件间的常用传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
组件间常用传参方式
1. props、emit（最常用的父子通讯方式）
父传子
父组件传入属性，子组件通过props接收，就可以在内部this.XXX的方式使用
// 父组件
<hello-world msg="hello world!"><hello-world>
// 子组件
<div>{{msg}}</div>
props：['msg']子传父
子组件$emit（事件名，传递的参数）向外弹出一个自定义事件，在父组件中监听子组件的自定义事件，同时也能获取子组件传出来的参数
// 子组件
<input v-model="username" @change="setUser">
return {
username:'tct'
}
methods：{
setUser(){
this.$emit('transferUser', username)
}
}
// 父组件
<hello-world @transferUser="getUser"><hello-world>
return {
user:''
}
methods：{
getUser(msg){
this.user = msg
}
}2. 事件总线EventBus（常用任意两个组件之间的通讯）
原理：注册的事件存起来，等触发事件时再调用。定义一个类去处理事件，并挂载到Vue实例的this上即可注册和触发事件，也可拓展一些事件管理
class Bus {
constructor () {
this.callbackList = {}
}
$on (name, callback) {
// 注册事件
this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
}
$emit (name, args) {
// 触发事件
if (this.callbackList[name]) {
this.callbackList[name].forEach(cb => cb(args))
}
}
}
Vue.prototype.$bus = new Bus()
// 任意两个组件中
// 组件一：在组件的 mounted() 去注册事件
this.$bus.$on('confirm', handleConfirm)
// 组件二：触发事件(如：点击事件后执行触发事件即可)
this.$bus.$emit('confirm', list)3.Vuex状态管理
（vue的核心插件，用于任意组件的任意通讯，需注意刷新后有可能vuex数据会丢失）
创建全局唯一的状态管理仓库store,有同步mutations、异步actions的方式去管理数据，有缓存数据getters，还能分成各个模块modules易于维护，详细使用见Vuex官方文档
vue组件传参记录
几个不太常用的组件传值方法记载
在vue项目中，父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯，就会比较麻烦。
parent / children 传参调用方法
vue中打印this可以看到,parent / children 通过这两个方法就可以实现组件传参和调用各自的方法了
eventBus这个自己安装下
通过main.js页面的全局抛出然后再 通过$emit定义传参修改 $on的方式监听变动 $off的方式销毁
provide/inject
父组件注入 子组件抛出给data 在Vue 3中，使用provide/inject，需要先创建一个Symbol类型的token
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解Vue2.5+迁移至Typescript指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了vue中的keep-alive内置组件缓存，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
如今的Vue3已经势不可挡,当然搭建一个全新的Vue3项目也有了全新的方式,下面这篇文章主要给大家介绍了关于如何手把手教你创建vue3项目的最佳方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue2.0 实现富文本编辑器功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
最近遇见一个需要上传超大大文件的需求,所以下面这篇文章主要给大家介绍了关于前端大文件上传与下载(分片上传)的详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
本文主要介绍了Vue实现Echarts图表宽高自适应的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了Vue3+Antd实现弹框显示内容并加入复制按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
vue3.0基于views批量实现动态路由的方法(示例代码)
以前vue项目中也有很多实现动态路由的方法,比如有一些项目涉及权限的可能会使用api请求路由数据在来createRouter,或者本地构建使用routes.push来动态构建路由, 今天介绍一种新的方式来基于某个文件夹批量构建动态路由的方法,感兴趣的朋友一起看看吧2024-12-12
这篇文章主要介绍了vue-drag-chart 拖动/缩放的图表组件的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要为大家介绍了vue项目如何使用mock，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
最新评论