1. 程式人生 > >vue 元件之間的資料互通

vue 元件之間的資料互通

一.父路由或父元件通知子路由或子元件:

1.在根vue處new Vue({

     data:{

            eventHub:new Vue()

      }

})

2.在父路由或父元件中:this.$root.eventHub.$emit("fnName",資料)

3.在子路由或子元件中:this.$root.eventHub.$on("fnName", function (n) {         console.log(n)     })

二.子路由或子元件通知父路由或父元件:

1.在父路由或父元件中:<router-view @FnName-a="FnName"></router-view>

methods:{       FnName(a) {            console.log(a)       }    }

2.在子路由或子元件中:this.$emit('FnName-a', 資料)