V004-同级组件传值

1.如果是兄弟组件，可通过父元素作为中间组件进行传值

1.2 $emit传值，props接收

使用$emit将child1.vue的值给父组件，父组件将值传给child2.vue,child2.vue使用props接收

parent.vue

<template>
  <div>
     <h2>我是父组件</h2>
     <child1 @handleClickChange="handleClickChangeTitle"></child1>
     <child2 :ptitle="title"></child2>
  </div>
</template>
<script>
import child1 from "child1";//文件地址
import child2 from "child2";//文件地址
export default {
  data() {
    return {
      title: ""
    };
  },
  components: {
    child1,
    child2
  },
  methods: {
    handleClickChangeTitle(title){//将改方法传递给child1组件
        this.title = title
    }
  }
}
</script>

child1.vue

<template>
  <div>
     <h2>我是child1组件</h2>
     <div>
     <input type="text"v-model="title"/>
      <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button>
    <div>{{title}}</div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: ""
    };
  },
  methods: {
    handleClickChangeTitle(title){
        this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法，同时将值传递给父组件
    }
  }
}
</script>

child2.vue

<template>
  <div>{{ptitle}}</div>
</template>
<script>
export default {
//接收父组件穿过来的值ptitle
 props:{ptitle:{ type: String}}
}
</script>

2.通过创建一个bus，进行传值

// 创建一个文件，定义bus中间件，并导出
const bus = new Vue()
// 在一个组件中发送事件
bus.$emit('事件名称', 传递的参数)


// 在另一个组件中监听事件
bus.$on('事件名称', 得到传过来的参数)

具体使用：在main.js同级目录下新建bus.js文件

import Vue from 'vue'
export default new Vue()

2、在组件a中传出值

先引入bus.js文件，再通过$emit传值

<template>
	<div @click="onfocus"></div>
</template>

<script>
    import Bus from '@/bus.js'
    
	export default{
		methods:{
	    	onfocus:function(fromid){
		    	Bus.$emit('getisshow',{
		    		show:true
		    	})
		     }
	    }
	}
</script>

3、在同级b组件中通过$on接收

<script>
    import Bus from '@/bus.js'
    
	export default{
		created(){
			Bus.$on('getisshow',data => {
				console.log(data)   //{show:true}
			})
		}
	}
</script>