只有当转换元素是组件中的根元素时，才调用转换hooks

Question

我注意到，只有当<transition>元素是我的组件模板中的根元素时，转换挂钩才会被触发。这是故意的吗？我是不是错过了什么？

在我的App.vue中，我有这个模板：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<example v-if = "checked"></example>

我的组件example.vue:

<template lang="html">
<section class="example">
<transition
v-on:enter = "enter"
v-on:leave = "leave">
<div class = "transition-example"></div>
</transition>
</section>
</template>
<script lang="js">
export default  {
name: 'example',
props: [],
mounted() {
},
data() {
return {
}
},
methods: {
enter: function (el, done) {
console.log("enter")
done()
},
leave: function(el, done) {
console.log("leave")
done()
}
}
}
</script>
<style scoped >
</style>

在当前的例子中，当切换复选框时，enter和leave挂钩永远不会执行。

如果我更新example.vue的模板以确保<transitions>元素是根元素(如下所示(，则会调用enter和leave挂钩。

<template lang="html">
<transition
v-on:enter = "enter"
v-on:leave = "leave">
<div class = "transition-example"></div>
</transition>

</template>

我希望在放置<transition>元素或在一个组件中有多个transition元素时有更大的灵活性，这些元素都有自己的挂钩。

我想我忽略了一些阻止我这么做的事情。

Answer 1

我注意到，只有当元素是我的组件模板中的根元素时，转换挂钩才会被触发。这是故意的吗？我是不是错过了什么？

这是因为这行<example v-if="checked"></example>。v-if应用于组件的实根元素，因此当转换在根中时，v-if应用于转换内的div，效果良好，但在第一种情况下，v-if应用于未处于转换中的section。因此，为了使转换工作正常，您应该在用transition标记包装的元素中提供v-if，您可以将checked作为道具来传递以指示可见性：

App.vue

...
<example :visible="checked"></example>
...

示例.vue

<template lang="html">
<section class="example">
<transition
v-on:enter = "enter"
v-on:leave = "leave">
<div v-if="visible" class="transition-example"></div>
</transition>
</section>
</template>