LayoutGroup
motion组件带有 layout prop 的组件将检测并动画布局变化每次它们提交 Vue 重新渲染，或它们的 layoutDependency prop 更改时。
LayoutGroup 用于分组可能不会一起渲染但会影响彼此状态的组件。
用法
以这些手风琴项目为例，它们各自处理自己的状态
<script setup> const isOpen = ref(false) </script> <template> <motion.div layout @click="isOpen=!isOpen" > <motion.h2 layout>{{header}}</motion.h2> {{isOpen ? content : null}} </motion.div> </template>
如果我们将这些并排放置在 Accordion 中，当它们的状态更新时，它们的兄弟组件无法得知
<!-- Accordion --> <template> <ToggleContent /> <ToggleContent /> </template>
可以通过使用 LayoutGroup 分组这两个组件来解决这个问题
<!-- Accordion --> <template> <LayoutGroup> <ToggleContent /> <ToggleContent /> </LayoutGroup> </template>
命名空间 layoutId
期望执行共享布局动画的组件被提供 layoutId prop。
在以下示例中，每个 Tab 渲染一个带有 layoutId="underline" prop 的元素。
<!-- Tab --> <template> <li> {{label}} <motion.div v-if="isSelected" layoutId="underline" /> </li> </template> <!-- TabRow --> <template> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </template>
layoutId 在您的站点中是全局的。因此，要渲染多个 TabRow，我们希望使用 LayoutGroup 和 id prop 对它们进行分组
<!-- TabRow --> <template> <LayoutGroup :id="id"> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </LayoutGroup> </template>
motion组件带有 layout prop 的组件将检测并动画布局变化每次它们提交 Vue 重新渲染，或它们的 layoutDependency prop 更改时。
LayoutGroup 用于分组可能不会一起渲染但会影响彼此状态的组件。
用法
以这些手风琴项目为例，它们各自处理自己的状态
<script setup> const isOpen = ref(false) </script> <template> <motion.div layout @click="isOpen=!isOpen" > <motion.h2 layout>{{header}}</motion.h2> {{isOpen ? content : null}} </motion.div> </template>
如果我们将这些并排放置在 Accordion 中，当它们的状态更新时，它们的兄弟组件无法得知
<!-- Accordion --> <template> <ToggleContent /> <ToggleContent /> </template>
可以通过使用 LayoutGroup 分组这两个组件来解决这个问题
<!-- Accordion --> <template> <LayoutGroup> <ToggleContent /> <ToggleContent /> </LayoutGroup> </template>
命名空间 layoutId
期望执行共享布局动画的组件被提供 layoutId prop。
在以下示例中，每个 Tab 渲染一个带有 layoutId="underline" prop 的元素。
<!-- Tab --> <template> <li> {{label}} <motion.div v-if="isSelected" layoutId="underline" /> </li> </template> <!-- TabRow --> <template> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </template>
layoutId 在您的站点中是全局的。因此，要渲染多个 TabRow，我们希望使用 LayoutGroup 和 id prop 对它们进行分组
<!-- TabRow --> <template> <LayoutGroup :id="id"> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </LayoutGroup> </template>
motion组件带有 layout prop 的组件将检测并动画布局变化每次它们提交 Vue 重新渲染，或它们的 layoutDependency prop 更改时。
LayoutGroup 用于分组可能不会一起渲染但会影响彼此状态的组件。
用法
以这些手风琴项目为例，它们各自处理自己的状态
<script setup> const isOpen = ref(false) </script> <template> <motion.div layout @click="isOpen=!isOpen" > <motion.h2 layout>{{header}}</motion.h2> {{isOpen ? content : null}} </motion.div> </template>
如果我们将这些并排放置在 Accordion 中，当它们的状态更新时，它们的兄弟组件无法得知
<!-- Accordion --> <template> <ToggleContent /> <ToggleContent /> </template>
可以通过使用 LayoutGroup 分组这两个组件来解决这个问题
<!-- Accordion --> <template> <LayoutGroup> <ToggleContent /> <ToggleContent /> </LayoutGroup> </template>
命名空间 layoutId
期望执行共享布局动画的组件被提供 layoutId prop。
在以下示例中，每个 Tab 渲染一个带有 layoutId="underline" prop 的元素。
<!-- Tab --> <template> <li> {{label}} <motion.div v-if="isSelected" layoutId="underline" /> </li> </template> <!-- TabRow --> <template> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </template>
layoutId 在您的站点中是全局的。因此，要渲染多个 TabRow，我们希望使用 LayoutGroup 和 id prop 对它们进行分组
<!-- TabRow --> <template> <LayoutGroup :id="id"> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </LayoutGroup> </template>
