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

vue组件传值

父传子

父组件

<child :childMsg="parentMsg"></child>
data(){
	return{
		//父组件的数据
		parentMsg:'父组件将要给子组件的数据'
	}
}

子组件（Child）

<p>{{childMsg}}</p>
props:{
	childMsg:{
		type:String,  //类型可以定义
		default:''  //默认是空值
	}
},
//或者直接props:['childMsg'],这种写法也行
mounted() {
    console.log(this.childMsg);//获取过来的直接当作data数据的用法来用
},

子传父

根据业务选择方式，这边列举三种当然还有其他的
方法一：$emit
方法二：$children/$parent
方法二：$refs

一：
子组件（mChild）

<button @click="childFn">
data(){
	return {
		pushParent:'即将要给父组件的值'
	}
}
methods:{
	childFn(){
		//第一个参数自定义事件名，第二个是数据
		this.$emit("childFnGetParent",pushParent)
	}
}

父组件

<p>{{msg}}</p>
<m-child @childFnGetParent="parentFn"></m-child>
data(){
	return {
		mag:''
	}
}
methods:{
	parentFn(val){
		this.msg=val
	}
}

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

这种方法就不多解释了，挺容易理解的，实在不理解可以打印this.$children/this.$parent 就可以获取到相关组件信息

三：
父传子的第三种方法（ref）
在父组件中的子组件m-child中添加一个ref=“事件名“，同样可以获取到i相关组件信息

非父子组件传值

provide 和 inject 传值

用于祖先与后代传值

简单贴张图

事件总线传值

传值思想其实是一致的，先使用$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),//注册时间相当于你创建的实例对象 vm.$emit注册事件并传值
      }
    }
  }
</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)
        this.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 listeners

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

v-bind="$attrs" v-on="$listeners"v-bind="$attrs"监听数据v-on="$listeners 监听事件
最外层的组件

  <Bro sex="男" name="xxx" @handleChange="getName"></Bro>

下一层的组件

  <Son v-bind="$attrs" v-on="$listeners"></Son>//必须要这样写不能改变

获取数据的组件

export default {
    components: { Last },
    mounted() {
        console.log(this.$attrs);
    }
}

如果还要把这个数据往下传就是组件继续v-bind="$attrs"往下传

 <Last v-bind="$attrs"></Last>

---

另外他的这种传值方式都是使用props传的只是用了一个组件过度，其实还有另外一种写法就是使用props的

最外层组件

 <Bro sex="男" name="xxx" @handleChange="getName"></Bro>

下一级组件

  <Son v-bind="$attrs" v-on="$listeners" :dataMsg="dataMsg"></Son>

最里面的组件，不仅可以使用props拿到上级的还可以拿到上上级的

---

其中还有inheritAttrs 的用法 默认是true，就是讲数据绑定在组件上，自己去研究

使用$attrs $listeners 进行子往上级传

逻辑过于简单，直接贴图自己实践
最里面组件

中间的组件都需要添加v-bind="$attrs" v-on="$listeners",不管中间有多少层

<Son v-bind="$attrs" v-on="$listeners" :dataMsg="dataMsg"></Son>

最外层

vueX

由于不是本篇讨论的东西，里面东西太多不过多展示有兴趣可以看下这个vuex的使用

剩下的还有路由传值，本地缓存等等这些都属于基础传值，自己去了解这里就这哪是先介绍这么多