【Vue组件传值】不同的组件之间的数据传值方法

不同的组件之间的数据传值方法

父组件向子孙组件传值、通过方法provide / inject

• （1）provide/inject的介绍： provide/ inject 是vue2.2.0新增的api ，这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

• （2）provide/inject的使用：

provide 提供变量：Object | () => Object
翻译过来的意思是：provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 注入变量：Array | { [key: string]: string | Symbol | Object }
翻译过来的意思是：一个字符串数组或一个对象，对象的 key 是本地的绑定名。

tips：
(1) inject注入变量中的 Symbol：是指独一无二的值。它是JavaScript语言的第七种数据类型。前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

(2) 还有一点是：provide/inject的使用前提是：保证在同一个祖先组件的条件下向其所有子孙后代组件注入变量。

1、provide使用object提供变量还是使用() => Object 提供变量在不同的场景下使用：

父组件给子组件和孙子组件传值的使用情景

1：传的是一个直接在provide写死的数据的时候，可以使用object这个方法。

实现代码如下：
（1）父组件给子组件以及孙子组件传值的布局
首先定义一个：父组件，命名为：parentComponent.vue, 引入子组件firstComponent.vue

<template>
  <div id="parentComponent">父组件
    <first-component>子组件</first-component>
  </div>
</template>
<script>
	import firstComponent from "./components/firstComponent.vue" // 子组件
    export default {
      components: {
        firstComponent
      },
      data() {
        return {
          strVal: '****这个是provide传给里面的不同层级的子组件的值****'
        };
      },
      provide() {
        return {
          strVal: this.strValData, // 这个是传一个字符串给它生命周期内的子组件
        }
      }
    }
</script>

(2) 在第一个子组件使用inject来获取它的父组件的provide中的值
在子组件firstComponent.vue中引入一个子组件secondComponent.vue

  <template>
    <div>
    	<second-component></second-component>
    </div>
  </template>
<script>
import secondComponent from "./components/secondComponent.vue" // 孙子组件
export default{
	components: {
		secondComponent
	},
	inject: ['strVal'], // 获取父组件provide中提供的变量: strVal
	data(){
		return {}
	},
	create(){
		console.log('第一个子组件拿到的值:', this.strVal)	
		// 结果将打印出这句话：
		第一个子组件拿到的值:
		这个是provide传给里面的不同层级的子组件的值
	}
}
</script>

(3) 同样的、在孙子组件使用inject来获取它的祖先组件provide中的值。
创建一个孙子组件secondComponent.vue

  <template>
  	<div></div>
  </template>
  <script>
  	export default{
        inject: ['strVal'], // 获取祖先组件provide中提供的变量: strVal
        data(){
            return {}
        },
        create(){
            console.log('第一个子组件拿到的值:', this.strVal)	
            // 结果将打印出这句话：第一个子组件拿到的值: 
            ****这个是provide传给里面的不同层级的子组件的值****
        }
    }
</script>

父组件给子组件和孙子组件传值的使用情景

2：传的是一个从接口获取到的数据或者在create或者mounted赋值的时候，可以使用()=>Object这个方法。

实现代码如下：
（1）父组件给子组件以及孙子组件传值的布局
首先定义一个：父组件，命名为：parentComponent.vue, 引入子组件firstComponent.vue

<template>
  <div id="parentComponent">父组件
    <first-component>子组件</first-component>
  </div>
</template>
<script>
	import firstComponent from "./components/firstComponent.vue" // 子组件
    export default {
      components: {
        firstComponent
      },
      data() {
        return {
          setData: {}
        };
      },
      provide() {
        return {
          setDataFn: this._setDataFn
        }
      },
      create(){
      	this.setData = {
          a: '1',
          b: '2'
        }
        console.log('根组件', this._setDataFn())
      },
      methods: {
      	_setDataFn(){
        	return this.setData
        }
      }
    }
</script>

(2) 在第一个子组件中使用inject来获取它的父组件的provide中的值
在子组件firstComponent.vue中引入一个子组件secondComponent.vue

<template>
  <div>
  	<second-component></second-component>
  </div>
</template>
<script>
	import secondComponent from "./components/secondComponent.vue" // 孙子组件
	export default{
		components: {
			secondComponent
		},
		inject: ['setDataFn'], // 获取父组件provide中提供的变量: setDataFn
		data(){
			return {}
		},
		create(){
			console.log('第一个子组件拿到的值:', this.setDataFn())
			// 如果在这个子组件中修改这个方法内的值，则会将父组件的provide中的属性值也一起改变
			例如：let res = this.setDataFn()
			res.a = '999'
			结果：在父组件中打印的this.setDataFn()得到的是一个对象：{
				a: '999',
				b: '2'
			}
		}
	}
</script>

(3) 同样的、在孙子组件使用inject来获取它的祖先组件provide中的值。
创建一个孙子组件secondComponent.vue

 <template>
  	<div></div>
  </template>
  <script>
  	export default{
        inject: ['setDataFn'], // 获取祖先组件provide中提供的变量: setDataFn
        data(){
            return {}
        },
        create(){
            console.log('孙子组件拿到的值:', this.setDataFn()) 
            // 这个得到的也是被这个孙子组件的父组件更改的数据
			// 如果在这个孙子子组件中修改这个方法内的值，
			则会将父组件的provide中的属性值也一起改变
			例如：let res = this.setDataFn()
			res.a = '999'
			结果：在孙子组件中打印的this.setDataFn()得到的是一个对象：{
				a: '999',
				b: '2'
			}
        }
    }
</script>

provide/inject总结

优点：
可以轻松实现跨级访问祖先组件的数据 、可以在该祖先组件下的任意层子组件中inject注入变量、都可以快速的获取到provide提供的变量、对使用组件封装之后的传值比较方便快捷。

缺点：
由于在任意层级子组件中都能访问根组件的数据、这就很容易导致数据追踪比较困难，无法马上具体的指定是那个组件使用了，因此这个属性通常并不建议使用。能用vuex的使用vuex，不能用的就多传参几层。但是在做组件库开发时，不对vuex进行依赖，且不知道用户使用环境的情况下可以很好的使用。

2: 父组件向子组件传值、通过方法props

（1）props的介绍：

​ 父组件传值给子组件有四个步骤：父组件的data中定义值，引入并调用子组件，在引用的子组件的标签上通过v-bind指令给子组件传值，子组件通过在data中定义的props属性接收父组件传过来的值然后应用到子组件里 。

注意:
props 是单向绑定的，只可以从上一级组件传递到下一级组件（父子组件） 当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件五一修改父组件的状态

props属性接收父组件传过来的值类型：
例如:

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,

    // 多个可能的类型
    propB: [String, Number],

    // 必填的字符串
    propC: {
    	type: String,
    	required: true
    },

    // 带有默认值的数字
    propD: {
    	type: Number,
    	default: 100
    },

    // 带有默认值的对象
    propE: {
        type: Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default: function () {
        	return { message: 'hello' }
        }
     },
     // 自定义验证函数
     propF: {
        validator: function (value) {
        	// 这个值必须匹配下列字符串中的一个
        	return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
  }

（2）props的使用：

实现方式一：父组件向子组件传值。不管传的是数组或者是对象给子组件、可以用v-bind:xxx=“xxx” 这个写法

下面是具体的代码实现父组件向子组件传值的写法：
首先、新建一个父组件 mainPage.vue

<template>
	<div class="content-page">
		<my-dialog :propsData="propsData"></my-dialog>
	</div>
</template>
<script>
	import myDialog from "components/myDialog.vue" // 父组件内引入子组件
	export default {
		data () {
			return {
				propsData: [] // 在父组件定义这个变量
			}
		},
		components: {
			myDialog
		},
		create() {
			this.propsData = [
				{
					a: '1',
					b: '2'
				},
				{
					a: '3',
					b: '4'
				}
			]
		}
	}
</script>

然后、新建一个子组件并在该组件中使用用props接收父组件的值。该组件的具体代码如下：

这个是子组件 myDialog.vue

<template>
  <div>{{propsData}}</div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: ['propsData'], // 用props接收父组件传过来的数据 props:['父组件自定义的属性名']
  create(){
  	console.log("this.propsData", this.propsData)
  }
}
</script>

这样就实现了父组件通过props方法向子组件传值。

实现方式二：父组件向孙子组件传值 。 实现的思路: 父组件的值先传给子组件、然后通过props方法、子组件再将从父组件获取的数据传给它的子组件(即孙子组件)。

具体的代码实现如下：
首先、新建一个父组件 mainPage.vue

<template>
	<div class="content-page">
		<my-dialog :strData="strData"></my-dialog>
	</div>
</template>
<script>
	import myDialog from "components/myDialog.vue" // 父组件内引入子组件
	export default {
		data () {
			return {
				strData: '这个是要传给子组件的值' // 父组件这一步不能少。不然传过去的值会出现问题。
			}
		}
	}
</script>

然后、再新建一个该父组件下的子组件 myDialog.vue

<template>
  <div :strData="strData">{{strData}}</div>
</template>
<script>
export default {
  props: ['strData']
}
</script>

最后创建一个孙子组件 sonDialog.vue

<template>
  <div>{{strData}}</div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: ['strData'],
  create(){
  	console.log(this.strData)
  }
}
</script>

这样就可以将父组件的值通过一层层的传给了孙子组件。一般两三层的组件之间进行传值可以使用这个方法。如果中间隔了太多层的组件、则不建议使用props传值、可以考虑使用provide/inject、或者vuex公共数据或者状态的管理。

3: 子组件向父组件传值、通过方法$emit

$emit的介绍： 由于prop是单向绑定的、当父组件的属性变化时，将传给子组件，但是不会反过来。

​ 但是在正常的业务代码中、有时候会出现改变子组件的某个值、要能动态的更改父组件中的某些值。那么改怎样在子组件中修改父组件的data中变量呢？ 这就需要在子组件通过调用this.$emit方法 来绑定一个自定义事件 去通知父组件自己修改自己的数据。

(2)$emit的使用：

实现方式一： 子组件向父组件传值。第一个写法：父组件传值使用修饰符xxx.sync, 在子组件中用$emit('update:xxx', 要传的值)、实现的代码如下所示:

(1)首先、新创建一个父组件 parentComp.vue

<template>
	<child-comp :xxx.sync="xxx" />
</template>
<script>
	import childComp from "components/childComp.vue" // 父组件内引入子组件
	export default {
		data () {
		 	return {
		 		xxx: true // 父组件给子组件传值，需要在data中定义一个变量
		 	}
		}
	}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template>
	<div>
		<button @click="changeParentDataFn">点击更新父组件的某个数据</button>
	</div>
</template>
<script>
	export default {
		data () {
		 	return {}
		},
		props: ['xxx'], // 父组件传给子组件的数据
		methods: {
			changeParentDataFn(){
				this.$emit('update:xxx', false)
			}
		}
	}
</script>

这样就实现了由子组件传值给父组件的其中一种方法。

实现方式二： 子组件向父组件传值。第二个写法：父组件传值使用正常的写法 @xxx=‘xxx’， 在子组件中用$emit(‘xxx’， 要传的值)、实现的代码如下所示:

(1)首先、新创建一个父组件 parentComp.vue

<template>
	<child-comp @xxx="xxxFn" />
</template>
<script>
	import childComp from "components/childComp.vue" // 父组件内引入子组件
	export default {
		data () {
		 	return {}
		},
		methods: {
			xxxFn(val){
				console.log('获取从子组件传回给父组件的数据',val)
			}
		}
	}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template>
	<div>
		<button @click="changeParentDataFn">点击更新父组件的某个数据</button>
	</div>
</template>
<script>
	export default {
		data () {
		 	return {}
		},
		props: ['xxx'], // 父组件传给子组件的数据
		methods: {
			changeParentDataFn(){
				this.$emit('xxx', false)
			}
		}
	}
</script>

这样就实现了由子组件传值给父组件的第二种方法。

  //（1）使用.sync的时候
  this.$emit('update:father-num',100);  //无效
  this.$emit('update:fatherNum',100); //有效

​ 所以、建议都以驼峰形式命名为佳。

4.父组件获取子组件的数据或者所有方法、使用$children 来访问子组件

（1） $children 的官方介绍：

​ 当前实例的直接子组件、需要注意 $children 并不保证顺序，也不是响应式的,返回的是一个数组.这个方法一般是在应急的时候才用的、它可以获取得到该父组件下的所有子组件的所有方法和数据。不管是第几层子组件，都可以通过$children方法拿到它的子组件的数据和方法、可以访问到子组件上所有的data()里的数据信息和生命周期方法，methods里的方法。不过获取父子组件的数据的时候、还是推荐使用props/$emit方法、这样能确定的知道数据来自那个组件。

（2） $children 的使用：

实现方式一：父组件获取子组件、使用$children方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template>
	<child-comp />
	<button @click="getChildAllData">获取子组件的数据和方法</button>
</template>
<script>
	import childComp from "components/childComp.vue" // 父组件内引入子组件
	export default {
		data () {
		 	return {}
		},
		methods: {
			getChildAllData(){
				// 得到的是一个无序的数组,唯一的标识就是里面的_uid属性
				let childAll = this.$children[0]
				console.log(childAll)
				// 结果；可以在里面找到子组件定义的方法并可以调用。
			}
		}
	}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template>
	<div></div>
</template>
<script>
	export default {
		data () {
		 	return {
		 		childMsg: '这个是子组件才有的数据'
		 	}
		},
		methods: {
			childUniqueFn(){
				return '这个是子组件的方法'
			}
		}
	}
</script>

5.父组件获取孙子组件的数据或者所有方法、也可以使用$children 来访问孙子组件

实现方式一：父组件获取孙子组件、也可以使用$children方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template>
	<child-comp />
	<button @click="getChildAllData">获取子组件的数据和方法</button>
</template>
<script>
	import childComp from "components/childComp.vue" // 父组件内引入子组件
	export default {
		data () {
		 	return {}
		},
		methods: {
			getChildAllData(){
				// 得到的是一个无序的数组,唯一的标识就是里面的_uid属性,
				// 但是也没法确定具体的组件是那个，需要点击进去查看对应的方法或者数据
				let childAll = this.$children // 这样可以找到子组件的方法和数据
				let childAll2 = this.$children[0] // 这样可以找到孙子组件的方法和数据
			}
		}
	}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template>
	<div>
		<son-comp></son-comp>
	</div>
</template>
<script>
	export default {
		data () {
		 	return {
		 		childMsg: '这个是子组件才有的数据'
		 	}
		},
		methods: {
			childUniqueFn(){
				return '这个是子组件的方法'
			}
		}
	}
 </script>

(3) 然后再创建一个子组件 sonComp.vue

<template>
	<div></div>
</template>
<script>
	export default {
		data () {
		 	return {
		 		sondMsg: '这个是孙子组件才有的数据'
		 	}
		},
		methods: {
			sonUniqueFn(){
				return '这个是孙子组件才有的数据'
			}
		}
	}
</script>

6.子组件获取父组件的数据或者所有方法、使用$parent

（1） $parent 的官方介绍：

​ $parent用来访问父组件实例，通常父组件都是唯一确定的 。可以访问到父组件上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }。

（2） $parent 的使用：

实现方式一：子组件获取父组件数据或者方法、可以使用$parent 方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template>
	<div>
		<child-comp />
	</div>
</template>
<script>
	import childComp from "components/childComp.vue" // 父组件内引入子组件
	export default {
		data () {
		 	return {
		 		parentMsg: '这个是父组件才有的数据'
		 	}
		},
		methods: {
			parentDataFn(){
				return '这个是父组件才有的方法'
			}
		}
	}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template>
	<div>
		<button @click="getParentDataFn">获取父组件数据或者方法</button>
	</div>
</template>
<script>
	export default {
		data () {
		 	return {}
		},
		methods: {
			getParentDataFn(){
				let parentData = this.$parent // 这样可以直接拿到父组件的方法和data中的数据
			}
		}
	}
</script>

实现方式二：孙子组件获取祖先组件数据或者方法、可以使用$parent 方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template>
	<div>
		<child-comp />
	</div>
</template>
<script>
	import childComp from "components/childComp.vue" // 父组件内引入子组件
	export default {
		data () {
		 	return {
		 		parentMsg: '这个是父组件才有的数据'
		 	}
		},
		methods: {
			parentDataFn(){
				return '这个是父组件才有的方法'
			}
		}
	}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template>
	<div>
		<son-comp></son-comp>
	</div>
</template>

（3）再创建一个孙子组件 sonComp.vue

<template>
	<div>
		<button @click="getRootDataFn">获取祖先组件的数据或者方法</button>
	</div>
</template>
<script>
	export default {
		data(){
			return {}
		},
		methods: {
			getRootDataFn(){
				// 父组件度是只有一个的
				// 所以这样就可以一层层的往上获取祖先组件的方法或者数据了
				let dom = this.$parent.$parent.fn() 
			}
		}
	}
</script>

7. 父组件获取子组件的方法或者数据、可以使用 ref / refs

（1） ref/refs的官方介绍：

​ ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件 。

​ 还有关于 ref 注册事件的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定 。

（2） ref/refs的使用：

实现方式一：父组件获取子组件数据或者方法、可以使用ref/refs方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template>
	<div>
		<child-comp ref="getChildRef" />
	</div>
</template>
<script>
	import childComp from "components/childComp.vue" // 父组件内引入子组件
	export default {
		data () {
		 	return {}
		},
		// 在dom节点加载完成之后操作
		mounted: {
			let comA = this.$refs.getChildRef
			console.log(comA.msg)
			conosle.log(comA.getDataFn())
		}
	}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template>
	<div></div>
</template>
<script>
	export default {
		data () {
		 	return {
		 		msg: '这个是用$refs来获取的'
		 	}
		},
		methods: {
			getDataFn(){
				return '这个是用$refs查找到该组件的方法来调用的'
			}
		}
	}
</script>

8.(这个未实现成功)子组件获取父组件的方法或者数据、可以使用 ref / refs

实现方式一：子组件获取父组件数据或者方法、可以使用ref/refs方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template>
	<div ref="parentCom">
		<child-comp />
	</div>
</template>
<script>
	import childComp from "components/childComp.vue" // 父组件内引入子组件
	export default {
		data () {
		 	return {
		 		parentMsgRef: '这个是父组件的data中的数据'
		 	}
		},
		methods: {
			parentFn(){
				return '这个是父组件方法返回的数据,能看到说明被子组件调用成功'
			}
		}
	}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template>
	<div></div>
</template>
<script>
	export default {
		data () {
		 	return {}
		},
		mounted(){
			let parentCom = this.$refs.parentCom
		}
	}
</script>

9.不同组件之间的传值，可以使用 localStorage 来实现不同组件之间的传值

（1）localStorage的官方介绍：

local(本地的) + storage(存储) == 本地存储的意思。 localstorage是window对象的API，作用是在本地浏览器内存中创建一个key：value的属性。而且 localStorage中一般浏览器支持的是5M大小 ，而每条cookie的存储空间只有4k大小。

通常有三种方法来创建localstorage ：

​ 一： localStorage.key = value

​ 二： localStorage[key] = value

​ 三： localStorage.setItem(‘key’, ‘value’) // 目前用的最多的是这种写法

（2）localStorage的使用：localStorage的获取和存储

通过window.localStorage.getItem(key) 获取数据

通过window.localStorage.setItem(key,value)存储数据

注意用JSON.parse() / JSON.stringify()做数据格式转换

localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.

总结： 因为localStorage的数据是存储在浏览器的内存中的，所以不同的组件可以随时的从localStorage中获取其他组件往里面存储的数据。这样也可以实现不同组件之间的数据交互。

优势：

1. localStorage拓展了cookie的4K限制
2. localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

局限性：

1. 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2. 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换-- JSON.parse()
3. localStorage在浏览器的隐身模式下面是不可读取的 --目前浏览器都是可以开启隐身模式的
4. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5. localStorage不能被爬虫抓取到 – 这个不知道会不会对网站的收录排名有影响???

10.非父子组件之间的传值，可以使用 sessionStorage 来实现不同组件之间的传值

（1）localStorage的官方介绍：

​ sessionStorage 是HTML5新增的一个会话存储对象，与localStorage类似，但是又有区别。用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据，而localStorage在页面关闭的时候是不会删除这些存储的数据的，除非人为的做了清空存储数据的操作或者调用了清空存储的方法。

sessionStorage 特点： 这部分是网上摘要复制下来的，做一个知识点备份。

1. 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)

2. 单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。

3. 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。

4. 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。

5. 存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

6. 目前兼容浏览器版本： IE8、Chrome 5 。

（2）seesionStorage的使用：与localStorage的获取和存储类似

通过 sessionStorage .getItem(key) 获取数据

通过 sessionStorage .setItem(key,value) 存储数据

注意： JSON.stringify()–存储是用 / JSON.parse()— 获取时候用

sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.

总结： 因为sessionStorage的数据是存储在浏览器的内存中的，所以不同的组件可以随时的从sessionStorage中获取其他组件往里面存储的数据。这样也可以实现不同组件之间的数据交互。

11.兄弟组件之间的传值，可以使用 eventBus 来实现

（1）eventBus的官方介绍：

（2）eventBus的使用：

12.所有的组件之间的传值，可以使用 vuex 来实现

（1）vuex 的官方介绍：

​ eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。但是当项目较大,就容易造成难以维护的问题。

（2）vuex 的使用：

13.跨级组件之间的传值，可以使用 $attrs 来实现

（1）$attrs的官方介绍：

（2）$attrs的使用：

​ 1）父组件向子组件传值

14.跨级组件之间的传值，可以使用 $listeners 来实现

（1）$listeners 的官方介绍：

（2）$listeners 的使用：