javascript - 努力将数据传输到子组件

Question

我真的是 VueJS 的新手，我正在尝试构建某种系统，其中我有四个可用的 Vue-Router 页面。这些页面从 1 到 4“排名”，如果新页面的排名高于旧页面，则过渡设置为“向左过渡”，否则为“向右过渡”。

我的问题是我无法将比较结果传递给子组件。这是我的 main.js 文件:

import Vue from "vue";
import VueRouter from "vue-router";
import Landing from "./components/Landing.vue";
import Bio from "./components/Bio.vue";
import Shop from "./components/Shop.vue";
import Contact from "./components/Contact.vue";
import App from "./components/App.vue";
import "./assets/style.css";

Vue.config.productionTip = false;
Vue.use(VueRouter);
let transitionName = "";

const router = new VueRouter({
  mode: "history",

  routes: [
    {
      path: "/",
      component: Landing,
      meta: { order: 1 }
    },
    {
      path: "/biography",
      component: Bio,
      meta: { order: 2 }
    },
    {
      path: "/shop",
      component: Shop,
      meta: { order: 3 }
    },

    {
      path: "/contact",
      component: Contact,
      meta: { order: 4 }
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.meta.order > from.meta.order) {
    transitionName = "slide-left";
  } else {
    transitionName = "slide-right";
  }
  next();
});

let vm = new Vue({
  router,
  el: "#app",
  data: {
    transitionName: transitionName
  },
  render: h => h(App)
});

下面是我尝试将“transitionName”值传递给“App.vue”的方式:

<template>
  <div id="app">
    <transition :name="name">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  props: ["transitionname"],
  data: function() {
    return { name: this.transitionname };
  }
};
</script>

我在想，也许我做错了 new Vue 部分，这不是您将数据传递给子组件的方式，但我找不到正确传递它的工作方式。

结果，一切正常，但没有任何转换，所以我猜 :name="name" 什么都没有。

我该如何解决这个问题？

提前致谢

Answer 1

以下是我可能会如何实现您想要实现的目标。基本上，您要做的就是观察 App 组件中的 $route。

watch:{
  $route(to, from){
    if (to.meta.order > from.meta.order) {
      this.name = "slide-left";
    } else {
      this.name = "slide-right";
    }
  }
}

Here is an example那个工作(没有实际的转换)。