vue的通信传值方式

一、路由通信传值

路由通信是通过路由跳转用query把参数带过去，也是vue常用的通信手段。
eg：list.vue跳转到update.vue，需要传递id

list.vue
this.$router.push({ path:"/update" , query:{ id:“213” } })
update.vue
let id = this.$route.query.id

list.vue

<template>
 <div>
  xxxxx
 </div>
</template>
<script>
export default {
    
 name: 'list',
 data () {
    
	 return {
    
	 }
 },
 mounted(){
    
 },
 methods:{
    
	 edit(){
    
	  this.$router.push({
     path:"/update" , query:{
     id:"213" } }) //路由跳转，并用query带过去参数
	 }
 }
}
</script>

update.vue

xxxxx
<script>
export default {
    
 name: 'update',
 data () {
    
	 return {
    
	 	id:'',
	 }
 },
 mounted(){
    
 	this.id = this.$route.query.id//在生命周期中接收传过来的数据
 },
 methods:{
    
	 findById(){
    
	  	//通过id查询数据即可。
	 }
 }
}
</script>

二、sessionStorage本地缓存通信

下边就是简写了。
A.vue

 var message = "哈哈哈"
 sessionStorage.setItem('text', message) //创建缓存

B.vue

mounted(){
   
 this.message = sessionStorage.getItem("text") //读取缓存
 },

三、组件之间的传值

1. 父传子

prop

父组件通过prop给子组件下发数据，如果传递的参数很多，可使用json数组{}的形式。
父组件 list.vue

<template>
 <div>
  <update :text=message :stepShow="stepShow"></update> //将message和stepShow两个参数传给子组件
 </div>
</template>

<script>
import update from '@/components/update.vue'	//引用组件
export default {
    
 name: 'list',
 components:{
    	//引用组件
	update
 },
 data () {
    
	 return {
    
	   message : "哈哈哈",
	   stepShow:false,
	 }
 },
 mounted(){
    
 
 },
 methods:{
    
 
 }
}
</script>

自组件update.vue

<template>
 <div>
  <p>我是关于页:{
  { message }}</p>
  <p v-if="this.stepShow"