1

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

主容器.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>
4

2 回答 2

0

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

于 2021-01-29T08:54:32.220 回答
0

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

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

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 包含。

于 2021-01-29T08:46:38.600 回答