vue组件之间传值的几种方式

太过爱你忘了你带给我的痛 2022-12-20 06:09 190阅读 0赞

## vue组件传值 ##

#### 父子组件之间传值。几种常见方式 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]

**第一种方式（父传子）**

父组件

<m-child :childMsg="parentMsg"></m-child>
    //在父组件中的子组件<m-child>上面绑定一个msg,此时已经把父组件的值绑定在子组件上
    data(){ 
    	return{ 
    		//父组件的数据
    		parentMsg:[]
    	}
    }

> 注意：数据绑定的时候记得加 ： 如果后面的数据是字符串则不用加 双引号 如果实在要加 ： 的时候写法 :msg="‘i am item’" ,因为 ：msg 默认把后面的识别变量，所以后面记得在字符串里面单引号，直接msg默认是字符串，后面不用加

子组件（mChild）  
通过子组件props属性继承父组件的值，在通过渲染模板渲染出来\{ \{msg\}\}

<p>{ { childMsg}}</p>
    props:{ 
    	childMsg:{ 
    		type:String,  //类型可以定义
    		default:''  //默认是空值
    		// type:Object, default () {return {}}
    	}
    }

**第二种方法（子传父）**

> 简单说明一下思路，虽然很绕但很好理解，多琢磨几次，  
> 子传父通过事件方法来传值，首先在子组件定义一个方法，当方法执行的时候调用`this.$emit('自定义的方法名'，'要给父组件的值')`的方法来提交值，在通过父组件中的子组件通过v-on或者@来绑定刚才的方法，当这个方法执行的时候后面会触发另外一个方法，在这个方法中的第一个参数就是传过来的值，然后可以处理这个值

父组件

<p>{ { msg}}</p>
    //将父组件中的子组件标签绑定事件,@子给父的事件=父组件中的事件
    <m-child @childFnGetParent="parentFn"></m-child>
    data(){ 
    	return { 
    		mag:''
    	}
    }
    methods:{ 
    //自定义父组件的方法,val就是子给父的值,第一个参数
    	parentFn(val){ 
    	//让父组件中的数据等于子给父的,这样msg就是传过来的值
    		this.msg=val
    	}
    }

子组件（mChild）

<button @click="childFn">
    
    methods:{ 
    	childFn(){ 
    	//自定意见$emit,传给父组件的事件名跟值
    		this.$emit("childFnGetParent",'要传入的值')
    	}
    }

父传子第二种方法（$children/ $parent）

> 这种方法就不多解释了，挺容易理解的，实在不理解可以打印this. c h i l d r e n / t h i s . children/this. children/this.parent 就可以获取到信息

mounted(){ 
    	this.$children/this.$parent //获取子组件或者父组件的组件信息
    }

父传子的第三种方法（ref）  
在父组件中的子组件m-child中添加一个ref=“事件名“

<button @click='togo'>
    <m-child ref="childFn"></m-child>
    mounted(){ 
    	//这种是可以通过方法来取得子组件的值
    	toGo() { 
    		//得到的就是childFn这个子组件,childFn相当于组件名,假如这个组件中有data数据
    		//则写法就是this.$refs.childFn.data,而子组件无非就是定义数据即可
    			console.log('我是接受参数的', this.$refs.childFn);
    		}
    
    	this.$refs.childFn
    }

> 这种方式跟第二种相似只不过他自己起了个事件名，方便查找

#### 非父子组件传值 ####

> 传值思想其实是一致的，先使用`$on`定义一个全局事件，后面写个回调函数，触发这个事件执行的方法，可以接参数`bus.$on('msg',val=>{ })`，msg就是全局事件，然后在想要获取这个全局事件里面的值就调用他，不过这时候不是 this. e m i t 而 是 b u s . emit 而是 bus. emit而是bus.emit

*  事件总线  
    首先创建一个公共文件夹 util  
    其次在创建一个js文件 例如bus.js

bus.js下面的代码

import Vue from 'vue'
    export default new Vue()

这是两个组件传值,在互相传值各组件中引入bus.js文件  
`import bus from "../bus.js"`  
在A组件中通过$emit调用自定义函数并且传参

<template>
      <div>
        A组件:
        <span>{ { elementValue}}</span>
        <input type="button" value="点击触发" @click="elementByValue">
      </div>
    </template>
    <script>
      // 引入公共的bug，来做为中间传达的工具
      import Bus from './bus.js'
      export default { 
        data () { 
          return { 
            elementValue: 4
          }
        },
        methods: { 
          elementByValue: function () { 
            Bus.$emit('val', this.elementValue)
          }
        }
      }
    </script>

B组件 用$on事件来接收参数

<template>
      <div>
        B组件:
        <input type="button" value="点击触发" @click="getData">
        <span>{ { name}}</span>
      </div>
    </template>
    <script>
      import Bus from './bus.js'
      export default { 
        data () { 
          return { 
            name: 0
          }
        },
        mounted: function () { 
          var vm = this
          // 用$on事件来接收参数
          Bus.$on('val', (data) => { 
            console.log(data)
            vm.name = data
          })
        },
        methods: { 
          getData: function () { 
            this.name++
          }
        }
      }
    </script>

只是全局组件传值,单个组件调用

> 然后在所有需要用到这个文件下面的数据只需要导入这个文件就行

在`APP.vue`下面定义一个方法

//全局中定义的方法名
    methods:{ 
    	passMsg(){ 
    	//注意这里的写法 
    		bus.$emit('msg','要传入的数数据')//自定义事件都用emit
    	}
    }
    //子组件利用勾子函数监听事件
    mounted(){ 
    	bus.$on('msg',(val)=>{ 
    		
    	})
    }

注意的是 在页面销毁的时候需要吧bus销毁掉
     destroyed() { 
        bus.$off("child2", this.destroyedMessage);
      }

*  $ attrs / listeners  
    解决多级组件间传值的问题

#### attrs ####

在`App.vue`下面定义数据并且把想要的数据全部绑定到相应的子组件上面  
然后在在其父组件上面绑定一个v-bind=’$attrs’ 注意这里不能简写，如果本身有的数据跟vue的数据名相同时，他会自动过滤

#### listeners ####

是通过监听事件来实现的

#### provide 和 inject 传值 ####

用于祖先与后代传值  
[这篇文章也不错后面的几种传值方式这里面有详解][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]: /images/20221120/fd290b0f1d4a4b0a9c77c4e9e09c6569.png
[Link 1]: https://blog.csdn.net/dan_seek/article/details/102641761