vue新手,通过路由切换两个静态组件,如何互相传值?

图片描述

图片描述

图片描述

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

阅读 7.2k
4 个回答

可以用 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')

官方推荐使用 Vuex 集中管理应用状态。

推荐问题
宣传栏