vue同级组件传值(同页面)

vue同级组件传值(同页面)

  • 新建bus总线
    • 触发Bus.$emit
    • 监听Bus.$on

新建bus总线

在main.js下新建bus.js

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

触发Bus.$emit

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

<script>
    import Busfrom '@/bus.js'
    
	export default{
		methods:{
	    	onfocus:function(fromid){
		    	Bus.$emit('getisshow',"要传输的内容,可以为字符串也可以为对象")
		     }
	    }
	}
</script>

监听Bus.$on

去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

<script>
    import Bus from '@/bus.js'
    
	export default{
		created(){
			Bus.$on('getisshow',data => {
				console.log(data)   //接收到的data为"要传输的内容,可以为字符串也可以为对象"
			})
		}
	}
</script>

如同页面的组件遇到获取不到值的情况,看一下触发和监听的对象是否为同一个
如遇到跳转获取不到值的情况,看一下监听函数是否在触发函数之前存在 ,可跳转这个链接查看https://blog.csdn.net/LJH111101/article/details/84663360

你可能感兴趣的:(vue)