Как использовать (именованные) слоты в гибридном приложении VueJS

Question

Я пытаюсь создать гибридное веб-приложение (Laravel + VueJs), в котором я использую Laravel для бэкэнда (маршрутизация и т. Д.) И использую для них динамические компоненты VueJS.

Я хочу использовать (именованные) слоты для передачи содержимого из моих шаблонов блейдов в компоненты VueJ.

Когда я загружаю страницу, я кратко вижу свое содержимое в слоте, но затем, спустя пару миллисекунд, он отключается.

Вот код, который у меня есть

main.js

require('./bootstrap');

window.Vue = require('vue');

import Vuetify from 'vuetify'
import App from './components/App';

Vue.use(Vuetify);

const app = new Vue({
    el: '#app',
    render: h => h(App),
});

Файл основного блейда

<div id="app">
  This is content
</div>

App.vue

<template>
    <slot></slot>
</template>

<script>
    export default {
        name: 'App',
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Что мне здесь не хватает?Как будто он сразу переопределяет содержимое слота (очищает его)

PS: я использую VueJs 2.6

Answer 1

Вам необходимо передать начальный контент при рендеринге приложения:

render(h) {
   return h(App, null, [this.$el.innerHTML])
}

См. Описание h (createElement) здесь: https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

Но это просто помещает контент вваш компонент приложения, я думаю, он не будет реагировать в любом случае.Вероятно, попытайтесь проверить особенности X-шаблона, чтобы достигнуть смешивания лезвия и vue:

https://vuejs.org/v2/guide/components-edge-cases.html#X-Templates

Answer 2

Я думаю, вам нужно передать значение слота при создании компонента со свойством render. Вместо этого синтаксис шаблона может быть проще использовать в вашем случае использования.

Удалите свойство render из вашего Vue объекта и зарегистрируйте свой компонент приложения с чем-то вроде

Vue.component('app', require('./components/App.vue').default);

Тогда ваш шаблон лезвия может содержать следующее:

<div id="app">
  <app>This is content</app>
</div>

Причина, по которой вы видите контент и затем он исчезает, заключается в том, что ваш HTML-контент визуализируется, а затем заменяется вашим шаблоном Vue, в котором есть пустой слот. Вы можете проверить это, добавив еще немного контента в шаблон Vue и посмотреть, будет ли он визуализирован. Если это так, то это означает, что значение слота не прошло правильно.