Blade 文件中的数据未在 Vue 组件中呈现

Question

我正在使用 Laravel Blade 并尝试将一些刀片文件转换为 vue 组件。我的 pagetitle 刀片文件中有一个属性。我正在尝试从我的 vue 组件而不是刀片获取动态创建的页面标题以在屏幕上呈现。但是在我的 vue 控制台中，数据返回为“”。不知道为什么数据会被保留。

Header.vue

    <template>
        <div>
            <p title="page-title">{{pageTitle}}</p>
        </div>

    </template>



   <script>
     export default {
     props: {
        pageTitle: {
            type: String
        }
      }
    }
  </script>

app.js

    window.Vue = require('vue');

    import Header from './components/Header';
    Vue.component('header', Header);

    const app = new Vue({
        el: '#app',
    });

main.blade.php

<div id="app">
    <header :page-title="{{$pageTitle}}"></header>
</div>

header.blade.php //页面标题是从哪里拉出来的

    <title>
        {{ $pageTitle ?? 'Default Page Title' }}
    </title>

Answer 1

在您的 Header.vue 文件中，您将 pageTitle 定义为数据属性，而它应该定义为 prop，因为您实际上是在 header 组件上将其作为属性提供。

props: {
    pageTitle: {
        type: String
    }
}

Answer 2

已经存在一个名为header 的HTML 元素，我建议你重命名你的组件。您的组件缺少 props 属性以从刀片获取输入：

页面标题.vue：

<template>
    <div>
        <p title="page-title">{{ this.pageTitle}}</p>
    </div>
</template>

<script>
    export default {
        props: ['title'],
        data() {
            return {
                pageTitle: '',
            };
        },
        created() {
            this.pageTitle = this.title
        }
    }
</script>

我们创建了一个title 属性。创建组件时，我们将组件的pageTitle 设置为main.blade.php 中给出的title。

app.js

window.Vue = require('vue');

import Pagetitle from './components/Pagetitle';
Vue.component('pagetitle', Pagetitle);

const app = new Vue({
   el: '#app',
});

main.blade.php

<div id="app">
    <pagetitle :title="foo bar"></pagetitle>
</div>

https://vuejs.org/v2/guide/components-props.html