Vue子组件之间的点击事件传值

发表于 | 分类于
字数统计: 202 | 阅读时长 ≈ 1

需求:A组件可以点击当前时间改变B组件的参数值。

1.先创建一个bus.js文件，当做中间媒介。

1
2
3

import Vue from "vue";
export default new Vue();

2.组件A,点击事件传递参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="letn" @click="Allchannels">

<script>
//引入中间媒介
import bus from '@/assets/bus'
export default {
	data():{
		return:switcha
	}
	methods:{
		Allchannels(){
	      //通过emit触发事件，并传值
	      bus.$emit("eventTarget",this.switcha);
    	}
	}
}
</script>

3.组件B,接收组件A的传值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class=".dialog" v-if="switcha">
<script>
import bus from '@/assets/bus'
export default {
   data() {
      return {
        switcha:false
      }
   },
   mounted(){
     //通过on监听事件，回调方法获取数据
      bus.$on("eventTarget",res=>{
        this.switcha = res;
      })
   }
}
</script>