vue.js 什么时候不应该在模板中使用div容器?

dw1jzc5e  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(136)

以前,下面的Vue组件会引发一个错误,因为“模板必须有一个孩子”(或类似的东西):

<template>
  <div>hello</div>
  <div>world</div>
</template>

字符串
我偶然发现,情况不再是这样了,这在最终代码中生成了两个单独的<div>,它们继承了父对象的行为(我在玩display: grid;时发现了这一点,然后意识到我的组件在整个屏幕上被分解了)。
我的问题是:在哪些情况下,有一个组件的行为没有封装在该组件中,但内部部分由父组件单独驱动,这是有趣的?
换句话说:哪些组件从没有容器<div>作为<template>的直接子容器中获益?
这个问题可能会延伸到Vue.js之外,但这是我所知道的唯一框架

qxsslcnc

qxsslcnc1#

Vue3开始支持多根组件。它们有一些限制,但由您决定是否使用它们,例如您可以制作基本的页面布局:
Layout.vue

<template>
<header>
  <div id="logo"></div>
  <!-- other common header elements -->
  <slot name="header"></slot>
</header>
<main>
  <nav>...</nav>
  <slot></slot>
</main>
<footer>
  <!-- common footer elements -->
  <slot name="footer"></slot>
</footer>
</template>
<style scoped>
/* style your header, main, footer here */
</style>

字符串

相关问题