vue.js - vue新手，通过路由切换两个静态组件，如何互相传值？

问题描述

问 题

很急，在线等回复，这样写 其他都没报错，本人用的是VUE2.0，

解决方案

可以用 EventBus ，詳細內容和例子請看我之前的回答：vue2 eventbus 求解惑

或是用很簡單的 Store Pattern 來實現共享數據：

例子

var store = {
  state: {
    Foo: {
        name: ''
    },
    Bar: { }
  },
  setFooName (name) {
    this.state.Foo.name = name
  }
}

const Foo = {
    template: '#foo-template',
    data() {
        return {
            name: this.$root.state.Foo.name
        }
    },
    methods: {
        inputName(e) {
            store.setFooName(e.target.value)
        }
    }
}

const Bar = {
    template: '#bar-template',
    data() {
        return {
            name: this.$root.state.Foo.name
        }
    }
}

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
  data() {
      return {
        state: store.state // 所有子組件通通可以利用 this.$root.state 取得該對象
    }
  }
}).$mount('#app')

这篇关于vue.js - vue新手，通过路由切换两个静态组件，如何互相传值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！