vue_传值的几种方式 组件通信 详解_vue

！important

在这之前请诸位看下 位于本文题目最右侧的小手手，点一下它，你的学习效率会提高3倍！大概在这个位置↗

正题：

·
·
父组件给子组件传值：
当前有一个父组件A，有一个子组件B

A：
我们要把arr每一个值传给子组件B
<template>
	<div>
		1：<子组件B v-for="(item,index) in arr" :item="item" :key="index"></子组件B>
		如果要把一个数组直接传过去，那么就直接这么写：
		2：<子组件B :arr="arr"></子组件B>
	</div>
</template>

<script>
	export default {
		name:'父组件A',
		data(){
			return {
				arr:[1,2,3,4,5] //我们要把这个arr传给子组件B
			}
		}
	}
</script>

B:
<script>
	export default {
		props:['arr'],//这里接收
		mounted(){
			console.log(this.arr)//[1,2,3,4,5]
		}
	}
</script>

·
·

• 子传给父 以及 兄弟之间传值：
  新建一个js文件在@/assets下，就叫他bus吧，有些人习惯起名字叫做vm

//bus.js:
import Vue from 'vue'
export default new Vue

B:
<script>
	import bus from '@/assets/bus'
	export default {
		data(){
			return {
				msg:"123123123123"
			}
		},
		mounted(){
			bus.$emit('msgB',this.msg)
		}
	}
</script>

A:
<script>
	import bus from '@/assets/bus'
	export default {
		mounted(){
			bus.$on('msgB',(msgb)=>{
				console.log(msgb)  //123123123123
			})
		}
	}
</script>

·
·
路由传值：

A:
这里是从A跳转到B组件：
<template>
	<div>
		【第一种：】
		<router-link :to="{name:'b',params:{name:'abcd'}}">go B</router-link>
		【第二种：】
		<router-link :to="{path:'/b',query:{name:'abcd'}}">go B</router-link>

		<h1 @click="goB">go B</h1>
	</div>
</template>

<script>
	export default {
		methods:{
			goB(){
			
				【第三种】（等同于第一种）
				this.$router.push({
					name:'b',
					params:{name:'abcd'}
				})
				
				
				【第四种】（等同于第二种）
				this.$router.push({
					path:'/b',
					query:{name:'abcd'}
				})
				
			}
		}
	}
</script>

B:
<script>
	export default {
		mounted(){
			console.log(this.$route.params)
			console.log(this.$route.qurey)
		}
	}
</script>

如有错处，亲各位指出~
还有就是用vuex传值，但是我写了一个小时了，就不写了

end