为所有刀片创建一个布局容器
Posted
技术标签:
【中文标题】为所有刀片创建一个布局容器【英文标题】：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>
【问题讨论】：
你的问题是什么？ 【参考方案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 内部，是内容组件。以上是关于为所有刀片创建一个布局容器的主要内容，如果未能解决你的问题，请参考以下文章