1. 程式人生 > >Vue-cli中非父子元件之間通訊

Vue-cli中非父子元件之間通訊

首先在main.js建立一箇中轉站,並且暴露出來。

//非父子元件通訊中心
const vueEvent=new Vue();
export default vueEvent;

然後在自己的頁面Page.vue中引入進來(路徑自行更改)

import vueEvent from '../../../main'

當前頁面的元件,點選的時候傳送資料為a標籤的內容,在mounted方法裡面 span裡面接收並重新渲染內容!

<a  @click='send'>{{ name }}</a>

<span>{{ defaultMsg }}</span>

data() {
			return {
                name:'小灰灰呀',
				defaultMsg:'全部'
			}
		},

methods:{	
			send:function(e){
		      vueEvent.$emit("outmes", e.srcElement.innerHTML);
		    }
		}

mounted: function() {	
	vueEvent.$on("outmes", function(mes) {
      that.defaultMsg = mes;
    });

效果每點選一個內容都會發送裡面的內容到上面