vue传值-父子&兄弟&路由(学习笔记)

父传子：
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>
import 子组件B from './b.js';
	export default {
             components:{
                子组件B,
              }
		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>

子传父：

B:
<template>
  <div>
    <button @click='handleFun'>测试一下</button>
  </div>
</template>
<script>
	export default {
		data(){
			return {
				msg:"123123123123"
			}
		},
		methods:{
		        this.$emit('add',this.msg)
		}
	}
</script>


A:
<template>
  <div>
    <button @add='add'>测试一下{{msg}}</button>
  </div>
</template>

<script>
	export default {
               methods:{
			add(data){
                         this.msg = data;
                  }
	}
</script>

兄弟传值
//bus.js:
import Vue from 'vue'
export default new Vue

父组件：

<template>
     <components-a></components-a>
     <components-b></components-b>
</template>

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


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

路由传值：

一、通过路由带参数进行传值

①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）

this.$router.push({ path: ‘/conponentsB’, query: { orderId: 123 } }) // 跳转到B

②在B组件中获取A组件传递过来的参数this.$route.query.orderId

二、sessionStory：

①两个组件A和B，在A组件中设置缓存orderDataconst orderData = { ‘orderId’: 123, ‘price’: 88 }s

essionStorage.setItem(‘缓存名称’, JSON.stringify(orderData))

②B组件就可以获取在A中设置的缓存了const dataB = JSON.parse(sessionStorage.getItem(‘缓存名称’))