将 Vue 根实例中的 prop 传递到刀片模板文件中的组件中

Posted 2023-02-22

技术标签:

【中文标题】将 Vue 根实例中的 prop 传递到刀片模板文件中的组件中【英文标题】：Passing a prop from the Vue root instance into a component inside a blade template file 【发布时间】：2021-07-23 05:53:58 【问题描述】：

我试图将根 vue 实例中的道具传递到位于刀片模板文件中的 vue 组件中。

刀片模板文件：

@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;
        
    
);

从刀片模板文件中可以看出，执行on-window-load=" onPageLoad " 将不起作用，因为刀片似乎没有根 Vue 实例的概念。那么如何呢？这可能吗？

【问题讨论】：

【参考方案1】：

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

所以要修复它，您可以从组件访问根实例数据在这种情况下，您希望在ComponentHeader 中获取onPageLoad

你当然可以像这样从组件中访问它