Vue.js 我的动态组件（布局）没有'；无法在vuejs中使用命名插槽

我无法将动态生成的布局与命名的插槽相结合

要定义布局，我使用“组件：is”

//app.vue
计算：{
布局（）{
const layout=this.$route.meta.layout | | |'默认'
return（）=>import（`@/app/layouts/${layout}.vue`）
}
},

//layouts/default.vue

//视图/page.vue
原语


{{primitive}}

但是现在我在代码中得到了这个错误

“v-slot”指令必须由自定义元素拥有，但“div”不是

控制台显示此错误

只能出现在接收组件内部的根级别

如果删除主div，则会出现错误

模板根目录只需要一个元素

---

我做错了什么？

这不容易解释，所以请跟我谈谈

我真的理解你想做什么，但不幸的是，这在Vue中是不可能的

原因是插槽更多的是模板编译器特性，而不是Vue的运行时特性。我这是什么意思？当Vue模板编译器看到类似于

的内容时，它将获取内部内容并将其编译为返回虚拟DOM元素的函数。这个函数必须传递给某个组件，该组件可以调用它，并将结果包含在它自己生成的虚拟DOM中。要做到这一点，模板编译器需要知道它应该将函数传递给哪个组件（这就是

'v-slot'指令的真正含义，必须由自定义元素拥有，但'div'不是。

错误消息…即编译器正在“寻找”要将插槽内容传递给的组件…）

但是您试图使用这些插槽，就好像它们在运行时是“可发现的”。要使代码正常工作，动态布局组件必须在运行时以某种方式发现它的子级（由于

，它也是动态的）有一些可以使用的插槽内容。这不是Vue中插槽的工作方式。您可以但不期望父组件（本例中的布局）能够“发现”在其子组件中定义的插槽内容

不幸的是，解决问题的唯一方法是在每个“页面”中导入布局组件，并将其用作模板中的根元素。您可以使用减少代码重复（定义

布局

计算）

@/mixins/withLayout.js

导出默认值={
计算：{
布局（）{
const layout=this.$route.meta.layout | | |'默认'
return（）=>import（`@/app/layouts/${layout}.vue`）
}
}
}

views/page.vue

原语


{{primitive}}


从“@/mixins/withLayout”导入withLayout
导出默认值{
混音：[带布局]
}

您使用的是哪个版本的Vue？我使用的是V2.6。好的，我明白。vue3是否可以实现这一点？因为你问我用的是哪个版本。没有。我的第一个想法是，在Vue 3中，由于模板中可能有多个根节点，这是可能的，但后来我意识到这是另一个问题（在我的回答中描述）Ok导入我的“布局”，将其添加到“组件：{layout}”，并在我的页面中使用它作为我的根元素工作。但“定义布局计算”是什么意思？为什么我需要它？添加了一些代码…未测试，但应该可以工作；）但这当然只是一个练习。如果您直接在每个页面中使用布局组件，那么只使用静态导入并在页面中使用所选布局组件将更容易阅读。。。