v-ref

v-ref

• Does not expect expression

• Limited to: child components

• Argument: id (required)

• Usage:

  Register a reference to a child component on its parent for direct access. Does not expect an expression. Must provide an argument as the id to register with. The component instance will be accessible on its parent’s $refs object.

  When used on a component together with v-for, the registered value will be an Array containing all the child component instances corresponding to the Array they are bound to. If the data source for v-for is an Object, the registered value will be an Object containing key-instance pairs mirroring the source Object.

• Note:

  Because HTML is case-insensitive, camelCase usage like v-ref:someRef will be converted to all lowercase. You can use v-ref:some-ref which properly sets this.$refs.someRef.

• Example:

  <comp v-ref:child></comp>
  <comp v-ref:some-child></comp>

  // access from parent:
  this.$refs.child
  this.$refs.someChild

  With v-for:

  <comp v-ref:list v-for="item in list"></comp>

  // this will be an array in parent
  this.$refs.list

• See also: Child Component Refs