Question

我正在Laravel Blade中工作，并尝试将一些刀片文件转换为vue组件。我的页面标题刀片文件中有一个属性。我正在尝试从我的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，因为实际上是在{{1}上提供它作为属性}组件。

header

Answer 2

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

Pagetitle.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设置为title中指定的main.blade.php。

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

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

2 个答案: