Question

所以我有这样的结构

<Root>
<HomeNav> router-view
<RouterLink>
<RouterLink>
<RouterLink>
<RouterLink>
<RouterLink>
<Home> router-view
<RouterLink>

现在，每个HomeNav路由器链接都是通过将数据传递给root来更改组件中的数据，但这意味着我需要绑定该数据：

      <router-view v-bind:title="title" v-bind:text="text" v-bind:youtube="youtube" v-bind:transition="transition"></router-view>

并运行创建和更新的功能：

new Vue({
  el: '#app',
  router,
  data: Variables,
  created: function () {
    path = pathname.pathname();
    pathLenght = pathname.countPathLenght(path);
    this.homeText(this.data);
  },
  updated: function () {
    path = pathname.pathname();
    pathLenght = pathname.countPathLenght(path);
    Pace.restart()
    this.homeText(this.data);
  },
  methods: {
    homeText(data) {
      data = toogleData.checkText(data);
      this.title = data[0];
      this.text = data[1];
      this.youtube = data[2];
    }
  }
})

然而，问题是我不需要所有路由上的数据，我不需要触发this.homeText函数或在每个根上绑定特定数据。它只在主页上需要，所以第一条路线。

所以问题是，是否可以直接将数据从HomeNav组件传递到Home组件而不需要在全局（根）组件中使用所有代码？

Answer 1

这是VueJs文档提出的MessagePump的好地方。它本质上是未绑定的Vue对象，充当对象之间的中介。这允许您在泵上定义和调用事件，并将其传递给相应的组件。

window.MessagePump = new Vue({});

Vue.Component(
    'HomeNav',
    {
        ...
        data: function () {
            return {
                homeText: 'something'
            }
        },
        ...
        mounted: function () {
            var thisArg = this
            MessagePump.$on(
                'homeTextChanged',
                function(newText) {
                    thisArg.homeText = newText;
                }
            );
        }
        ...
    }
);

Vue.Component(
    'Home',
    {
        ...
        mounted: function () {
            MessagePump.$emit('homeTextChanged', 'To This');
        }
        ...
    }
);

这将触发事件以及更改homeText的内容＆＃39;到这个＆＃39;。

Vue将数据从子组件传递到子组件

1 个答案: