使用 laravel 和 vuejs2 的 props答案

【问题标题】：use props with laravel and vuejs2使用 laravel 和 vuejs2 的 props
【发布时间】：2020-06-10 07:33:36
【问题描述】：

嗨，我正在使用 laravel 和 vuejs2 这是我的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 非常感谢

【问题讨论】：

我猜，你想从 Laravel 刀片传递 page_title。对吗？

标签： javascript vue.js vuejs2 vue-directives

【解决方案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>

【讨论】：