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

vue组件传值

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

第一种方式（父传子）

父组件

<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.$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.$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 传值

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