使用 laravel 和 vuejs2 的道具

Question

嗨，我在 vuejs2 中使用 laravel 这是我的 App.vue 代码

<template>
    <div>
        <Navbar></Navbar>
        <Applications></Applications>
        {{page_title}}
        <router-view></router-view>
    </div>
</template>

<script>
    import Navbar from '../components/Navbar'
    import Applications from '../components/Applications'

    export default {
        name: 'App',
        components: {
            Navbar, Applications
        },
        data: function () {
            return {
                page_title: 'Main',
            }
        }
    }
</script>

到目前为止一切都很好.. 所以在我的 routes.js 中我做了这个代码

{ path: '/settings', component: Settings},

在我的 Settings.Vue 中我做了这个代码

<template>
    <div>
        setting components
        {{page_title}}
    </div>
</template>
<script>
    export default {
        props: ['page_title'],
        name: 'Settings',
    }
</script>

但我无法从道具访问 page_title 我想要从 Settings.vue 中的 App.vue 访问 page_title 非常感谢

Answer 1

您必须将数据传递给 <router-view>：

const Page = {
  template: "<div>Title: {{page_title}}</div>",
  props: ["page_title"]
};

const router = new VueRouter({
  routes: [{
    path: "/",
    component: Page
  }]
});

const app = new Vue({
  router,
  template: "<router-view :page_title='page_title'></router-view>",
  data() {
    return {
      page_title: "It's magic!"
    };
  }
}).$mount("#app");

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@3.1.6/dist/vue-router.min.js"></script>
<div id="app"></div>

使用 laravel 和 vuejs2 的道具

use props with laravel and vuejs2

javascript

vue.js

vuejs2

vue-directives