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

Posted 2023-02-23

【中文标题】如何在混合 VueJS 应用程序上使用（命名）插槽

【英文标题】：How to use (named) slots on hybrid VueJS app

【发布时间】：2019-11-12 06:03:46

【问题描述】：

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

我想使用 (named) slots 将我的刀片模板中的内容传递到 VueJs 组件中。

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

这是我的代码

ma​​in.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

【参考方案1】：

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

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

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

那么你的刀片模板可以包含以下内容：

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

您看到内容然后消失的原因是您的 html 内容被渲染，然后被具有空槽的 Vue 模板替换。您可以通过向 Vue 模板添加更多内容来测试它，并查看它是否被渲染。如果是这样，则意味着插槽值未正确传递。

【讨论】：

这非常有效。我试图避免使用 <app></app> 元素。但显然这不能完成......现在我需要测试我是否可以轻松地在组件中使用组件:-) 再次感谢

【参考方案2】：

渲染应用时需要传递初始内容：

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

在此处查看h (createElement) 描述： https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

但这只是将内容放入您的 App 组件中，我认为它无论如何都不会是反应式的。可能会尝试检查 X-template 功能以实现刀片和 vue 混合：

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