Vue-cli中非父子元件之間通訊
阿新 • • 發佈:2019-02-10
首先在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; });
效果每點選一個內容都會發送裡面的內容到上面