Special Attributes

admin管理员组

文章数量:1550528

Special Attributes
key

Expects: number | string

The key special attribute is primarily used as a hint for Vue’s virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed/destroyed.

Children of the same common parent must have unique keys. Duplicate keys will cause render errors.

The most common use case is combined with v-for:

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:
    Properly trigger lifecycle hooks of a component
    Trigger transitions

For example:

<transition>
  <span :key="text">{{ text }}</span>
</transition>

When text changes, the <span> will always be replaced instead of patched, so a transition will be triggered.

ref

Expects: string

ref is used to register a reference to an element or a child component. The reference will be registered under the parent component’s $refs object. If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be component instance:

<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>

<!-- vm.$refs.child will be the child component instance -->
<child-component ref="child"></child-component>

When used on elements/components with v-for, the registered reference will be an Array containing DOM nodes or component instances.

An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet! $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.

See also: Child Component Refs

is

Expects: string | Object (component’s options object)

Used for dynamic components and to work around limitations of in-DOM templates.

For example:

<!-- component changes when currentView changes -->
<component v-bind:is="currentView"></component>

<!-- necessary because `<my-row>` would be invalid inside -->
<!-- a `<table>` element and so would be hoisted out      -->
<table>
  <tr is="my-row"></tr>
</table>

For detailed usage, follow the links in the description above.

See also:
    Dynamic Components
    DOM Template Parsing Caveats

slot deprecated

Prefer v-slot in 2.6.0+.

Expects: string

Used on content inserted into child components to indicate which named slot the content belongs to.

See also: Named Slots with slot

slot-scope deprecated

Prefer v-slot in 2.6.0+.

Expects: function argument expression

Usage:

Used to denote an element or component as a scoped slot. The attribute’s value should be a valid JavaScript expression that can appear in the argument position of a function signature. This means in supported environments you can also use ES2015 destructuring in the expression. Serves as a replacement for scope in 2.5.0+.

This attribute does not support dynamic binding.

See also: Scoped Slots with slot-scope

scope removed

Replaced by slot-scope in 2.5.0+. Prefer v-slot in 2.6.0+.

Used to denote a element as a scoped slot.

Usage:

Same as slot-scope except that scope can only be used on <template> elements.

本文标签： specialattributes