为所有刀片创建一个布局容器答案

【问题标题】：Make a layout container for all blades为所有刀片创建一个布局容器
【发布时间】：2021-05-03 04:13:42
【问题描述】：

我正在创建我的 vanilla vuejs 应用程序的 laravel-vuejs 混合版本，在我的 vuejs 应用程序中，我有一个用于所有组件的主组件容器。是这样的……

MainContainer.vue

<template>
   <div>
       <topnav/>
       <sidenav/>
   
       <div class="content">
          <router-view/> //whichever component it is
       </div>
   </div>
</template>

我希望在我的 laravel-vuejs 混合应用中使用这种结构，

到目前为止，我有这个：
layout > master-container.blade.php
modules > module1-blade.php
> module2-blade.php
> and so on...

master-container.blade.php 看起来像这样...

<!DOCTYPE html>
<html lang="en">
<head>
<body >
    <div id="vue-app" v-cloak>
        @yield('content')
    </div>
   <scripts here>
</body>
</html>

我的模块刀片看起来像这样......

@extends('layout.master-container')
@section('content')
   <module1 inline-template>
      @include('topnav')
      @include('sidebar')
      ..contents here
   </module1>
@ensection

现在当我签到vue-devtools

组件放置不是我想要的。它是这样的：

<Root>
    <Module1>
        <Topnav>
        <Sidenav>

它应该是这样的：

<Root>
    <Topnav>
        <Sidenav>
            <Module1>

【问题讨论】：

你的问题是什么？

标签： laravel vue.js laravel-blade laravel-8 laravel-vue

【解决方案1】：

您有一个 ID 为 vue-app 的 div。假设这是您的 Vue 实例，您可以像以前一样在任何扩展此布局的刀片视图中使用组件。

在 app.js 文件中注册您的 Vue 组件，如下所示：

import Vue from 'vue';
require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

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

然后你可以像以前一样使用你的 Vue 组件。无需将它们放入 Blade 包含中。

【讨论】：

我有一个编辑，希望对您有所帮助
您是否将 Vue 组件添加为刀片包含的组件？即@include('topnav') 是 Vue 组件吗？
不需要那样做，只要在你的app.js中注册就可以像使用Vue组件<topnav>一样使用它们。

【解决方案2】：

您必须将包含的内容（不是@include）放在主刀片文件中，就在@yield 内容之前，并安排它们以获得所需的输出如需更精准的回复，必须贴出更详细的代码（sidenav、topnav、...内容）

【讨论】：

不，这意味着 topnav 和 content 将同时渲染，而 topnav 之外的内容，我想要的是 topnav 先渲染然后在 topnav 内部，是内容组件。