将 Vue 根实例中的道具传递到 blade 模板文件中的组件

Question

我正在尝试将 prop 从根 vue 实例传递到位于 blade 模板文件中的 vue 组件。

Blade 模板文件：

@extends('layouts.master')

@section('content')
    <header-0 on-window-load="{{ onPageLoad }}"><header-0>
    <header-search-modal></header-search-modal>
    <side-nav></side-nav>
@endsection

JavaScript 根 Vue 实例：

var ComponentHeader = require('./components/Header.vue').default;
var ComponentHeaderSearchModal = require('./components/SearchModal.vue').default;
var ComponentSideNav = require('./components/SideNav.vue').default;


const app = new Vue({
    el: '#app',
    data(){
        return{ 
            onPageLoad: false
        }
    },
    components:{'header-0': ComponentHeader,
                'header-search-modal': ComponentHeaderSearchModal,
                'side-nav': ComponentSideNav
    },
    created(){
        window.onload = function(){
            this.onPageLoad = true;
        }
    }
});

从blade模板文件中可以看出，做on-window-load="{{ onPageLoad }}"是行不通的，因为blade似乎没有根Vue实例的概念。那么如何将 Vue 根实例中的 prop 传递到 blade 模板文件中的组件中呢？这可能吗？

Answer 1

您的 blade 模板在后端呈现并作为请求的一部分返回到浏览器。但是，您的 javascript 是在浏览器完成请求后实例化的。这意味着您的 blade 对 javascript 没有任何线索，因此您不能在 blade 模板中使用 javascript。

所以要修复它，您可以从组件访问根实例数据在这种情况下，您想在 ComponentHeader

中获取 onPageLoad

您当然可以从这样的组件访问它

this.$root.$data.onPageLoad

将 Vue 根实例中的道具传递到 blade 模板文件中的组件

Passing a prop from the Vue root instance into a component inside a blade template file

laravel

vue.js

laravel-blade