vue-组件传参(父子,兄弟,组件跨级)

2022年6月2日10:07:47

一、父子组件之间的传参

vue-组件传参(父子,兄弟,组件跨级)

1.父传子:

父组件向子组件传入一个参数
注意:父组件传入到子组件中的数据不允许子组件修改:单向数据流
如果需要能修改的话,那么那个数据应该是复杂数据类型,例如Data、function、Array,object等
复杂数据类型:复杂数据类型在栈中存储数据名和一个堆的地址,在堆中存储属性及值。访问时先从栈获取地址,再到堆中拿出相应的值。
修改:直接将栈空间的内容进行修改
修改是:栈空间中的内容不会修改,改的是堆空间内容

-父传:
在父组件中:通过给子组件添加自定义属性:来传递参数

//html<son:passvalue="aMsg"/>

-子接:
在子组件中:通过 props 属性来进行接收

exportdefault{
	props:['passvalue']//passvalue是父组件传递给子组件的参数}

子组件接收到参数之后的用法跟 data 中数据的用法是一样的,使用this来获取

let value=this.passvalue

2.子传父

子组件向父组件传入一个参数
-子传:通过一个自定义事件向父组件传递参数:

//在子组件中的methods中写
methods:{this.$emit('passtofather',this.sonMsg)}

-父接
通过实现这个自定义事件来接收参数

// html<son @passtofather="myfn"/>// 在父组件中接收参数时,如果代码写在 html 行内,要获取传入的数据可以通过 $event// jsexportdefault{
	methods:{myfn(value){// value 就是子组件传入的参数}}}

二、兄弟组件之间传参:eventBus插件

使用步骤:

  1. 下载插件:
 npm i eventbus
  1. 创建一个公用的bus,哪里用到就导入
//1.创建一个bus.js文件// 导入vueimport Vuefrom'vue';// 导出busexportdefaultnewVue();//(没错,这个文件就两行代码)//2.使用://在login.vue组件中使用到bus,就在vue中导入bus文件//导入 bus.js<script>import busfrom 文件路径/bus.jsexportdefault{
	methods:{openreply(){//在这里随意写一个方法// 通过eventbus 向(兄弟组件)中传入数据源 (值)
	        bus.$emit('passitem',this.commentItem)}}</script>//在home.vue组件(兄弟)接收login.vue兄弟传过来的值<script>//导入bus.jsimport busfrom 文件路径/bus.jsexportdefault{created(){//  $on 接收comment兄弟组件传的参数
    bus.$on("passitem", value=>{this.commentItem= value;//value就是comment组件传过来的commentItem});},}</script>

三、组件跨级传参:$attrs和$listeners

vue-组件传参(父子,兄弟,组件跨级)
如果A需要传递给C ,该如何传参?
1.当然你可以使用VueX来进行数据管理,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,使用vuex就没有发挥出VueX的威力了。
2.使用B来做中转站,也是可以的,但是组件如果嵌套更多,这种方法就会导致代码繁琐,不容易维护
3.使用$attrs和$listeners,这是vue2.4版本出来的方法
vue-组件传参(父子,兄弟,组件跨级)
vue-组件传参(父子,兄弟,组件跨级)
(本人没有具体使用过这个传参方式,若有哪位大佬使用过,非常欢迎来指点一下,技术问题可尽情来骚扰!!)

组件传参还有其他种方式

组件之间的传参方式:

  • props / $emit
  • eventbus
  • vuex
  • $attrs / $listeners
  • ref / $parent
  • 作者:MMFerry
  • 原文链接:https://blog.csdn.net/MMFerry/article/details/106928520
    更新时间:2022年6月2日10:07:47 ,共 1577 字。