1预期:string | Object (组件的选项对象)
用于动态组件且基于 DOM 内模板的限制来工作。
示例:
<!-- 当 `currentView` 改变时,组件也跟着改变 --> <component v-bind:is="currentView"></component> <!-- 这样做是有必要的,因为 `<my-row>` 放在一个 --> <!-- `<table>` 内可能无效且被放置到外面 --> <table> <tr is="my-row"></tr> </table>
更多的使用细节,请移步至下面的链接。
推荐 2.6.0 新增的 v-slot。
string
用于标记往哪个具名插槽中插入子组件内容。推荐 2.6.0 新增的 v-slot。
function argument expression
scope
。
此 attribute 不支持动态绑定。被 2.5.0 新增的 slot-scope 取代。推荐 2.6.0 新增的 v-slot。
用于表示一个作为带作用域的插槽的 <template>
元素,它在 2.5.0+ 中被 slot-scope
替代。
scope
只可以用于 <template>
元素,其它和 slot-scope
都相同。is
- string | ComponentDefinition | ComponentConstructorinline-template
- booleanis
的值,来决定哪个组件被渲染。
<!-- 动态组件由 vm 实例的 `componentId` property 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件 --> <component :is="$options.components.child"></component>name
- string,用于自动生成 CSS 过渡类名。例如:name: 'fade'
将自动拓展为 .fade-enter
,.fade-enter-active
等。默认类名为 "v"
appear
- boolean,是否在初始渲染时使用过渡。默认为 false
。css
- boolean,是否使用 CSS 过渡类。默认为 true
。如果设置为 false
,将只通过组件事件触发注册的 JavaScript 钩子。type
- string,指定过渡事件类型,侦听过渡何时结束。有效值为 "transition"
和 "animation"
。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。mode
- string,控制离开/进入过渡的时间序列。有效的模式有 "out-in"
和 "in-out"
;默认同时进行。duration
- number | { enter
: number, leave
: number } 指定过渡的持续时间。默认情况下,Vue 会等待过渡所在根元素的第一个 transitionend
或 animationend
事件。enter-class
- stringleave-class
- stringappear-class
- stringenter-to-class
- stringleave-to-class
- stringappear-to-class
- stringenter-active-class
- stringleave-active-class
- stringappear-active-class
- stringbefore-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled
(v-show
only)appear-cancelled
<transition>
元素作为单个元素/组件的过渡效果。<transition>
只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。
<!-- 简单元素 --> <transition> <div v-if="ok">toggled content</div> </transition> <!-- 动态组件 --> <transition name="fade" mode="out-in" appear> <component :is="view"></component> </transition> <!-- 事件钩子 --> <div id="transition-demo"> <transition @after-enter="transitionComplete"> <div v-show="ok">toggled content</div> </transition> </div>
new Vue({ ... methods: { transitionComplete: function (el) { // 传入 'el' 这个 DOM 元素作为参数。 } } ... }).$mount('#transition-demo')tag
- string,默认为 span
move-class
- 覆盖移动过渡期间应用的 CSS 类。mode
,其他 attribute 和 <transition>
相同。<transition>
相同。<transition-group>
元素作为多个元素/组件的过渡效果。<transition-group>
渲染一个真实的 DOM 元素。默认渲染 <span>
,可以通过 tag
attribute 配置哪个元素应该被渲染。
注意,每个 <transition-group>
的子节点必须有独立的 key,动画才能正常工作
<transition-group>
支持通过 CSS transform 过渡移动。当一个子节点被更新,从屏幕上的位置发生变化,它会被应用一个移动中的 CSS 类 (通过 name
attribute 或配置 move-class
attribute 自动生成)。如果 CSS transform
property 是“可过渡”property,当应用移动类时,将会使用 FLIP 技术使元素流畅地到达动画终点。
<transition-group tag="ul" name="slide"> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </transition-group>include
- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max
- 数字。最多可以缓存多少组件实例。<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
当组件在 <keep-alive>
内被切换,它的 activated
和 deactivated
这两个生命周期钩子函数将会原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。