Question

我试图创建一个混合Web应用程序（Laravel + VueJs），在其中我将Laravel用于后端（路由等），并为它们使用动态VueJS组件。

我想使用（命名）插槽将内容从刀片模板传递到VueJs组件中。

加载页面时，我会在插槽中短暂看到我的内容，但是仅几毫秒后，内容就被清空了。

这是我的代码

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：我正在使用VueJ 2.6

Answer 1

我认为在使用render属性创建组件时，您需要传递插槽值。模板语法可能更易于在您的用例中使用。

从您的 Vue 对象中删除render属性，并使用类似的东西注册您的应用组件

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

然后您的刀片服务器模板可以包含以下内容：

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

看到内容然后消失的原因是，呈现了html内容，然后将其替换为具有空位的Vue模板。您可以通过在Vue模板中添加更多内容并查看其是否呈现来进行测试。如果是这样，则表示广告位值未正确传递。

Answer 2

渲染应用程序时，您需要传递初始内容：

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

请参见h（createElement）说明： https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

但这只是将内容放入您的App组件中，我认为它绝对不会反应。可能尝试检查X模板的特征来实现叶片和Vue的混合：

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

如何在混合VueJS应用上使用（命名）插槽

2 个答案: