# インスタンスプロパティ

# $data

  • Type: Object

  • Details:

    The data object that the component instance is observing. The component instance proxies access to the properties on its data object.

  • See also: Options / Data - data

# $props

  • Type: Object

  • Details:

    An object representing the current props a component has received. The component instance proxies access to the properties on its props object.

# $el

  • Type: any

  • Read only

  • Details:

    The root DOM element that the component instance is managing.

# $options

  • Type: Object

  • Read only

  • Details:

    The instantiation options used for the current component instance. This is useful when you want to include custom properties in the options:

    const app = Vue.createApp({
      customOption: 'foo',
      created() {
        console.log(this.$options.customOption) // => 'foo'
      }
    })
    
    1
    2
    3
    4
    5
    6

# $parent

  • Type: Component instance

  • Read only

  • Details:

    The parent instance, if the current instance has one.

# $root

  • Type: Component instance

  • Read only

  • Details:

    The root component instance of the current component tree. If the current instance has no parents this value will be itself.

# $slots

  • Type: { [name: string]: (...args: any[]) => Array<VNode> | undefined }

  • Read only

  • Details:

    Used to programmatically access content distributed by slots. Each named slot has its own corresponding property (e.g. the contents of v-slot:foo will be found at this.$slots.foo()). The default property contains either nodes not included in a named slot or contents of v-slot:default.

    Accessing this.$slots is most useful when writing a component with a render function.

  • Example:

    <blog-post>
      <template v-slot:header>
        <h1>About Me</h1>
      </template>
    
      <template v-slot:default>
        <p>
          Here's some page content, which will be included in $slots.default.
        </p>
      </template>
    
      <template v-slot:footer>
        <p>Copyright 2020 Evan You</p>
      </template>
    </blog-post>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const app = Vue.createApp({})
    
    app.component('blog-post', {
      render() {
        return Vue.h('div', [
          Vue.h('header', this.$slots.header()),
          Vue.h('main', this.$slots.default()),
          Vue.h('footer', this.$slots.footer())
        ])
      }
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
  • See also:

# $refs

  • Type: Object

  • Read only

  • Details:

An object of DOM elements and component instances, registered with ref attributes.

# $attrs

  • Type: Object

  • Read only

  • Details:

Contains parent-scope attribute bindings and events that are not recognized (and extracted) as component props or custom events. When a component doesn't have any declared props or custom events, this essentially contains all parent-scope bindings, and can be passed down to an inner component via v-bind="$attrs" - useful when creating higher-order components.

Deployed on Netlify.
最終更新日: 12/2/2020, 2:00:23 AM