Vue 3.0 實(shí)例property

#$data

• 類型：Object

• 詳細(xì)：

組件實(shí)例觀察的數(shù)據(jù)對(duì)象。組件實(shí)例代理了對(duì)其 data 對(duì)象 property 的訪問。

• 參考選項(xiàng) / 數(shù)據(jù) - data

#$props

• 類型：Object

• 詳細(xì)：

當(dāng)前組件接收到的 props 對(duì)象。組件實(shí)例代理了對(duì)其 props 對(duì)象 property 的訪問。

#$el

• 類型：any

• 僅可讀

• 詳細(xì)：

組件實(shí)例使用的根 DOM 元素。 對(duì)于使用片段的組件，$el將是Vue用于跟蹤組件在DOM中位置的占位符DOM節(jié)點(diǎn)。建議使用模板引用直接訪問DOM元素，而不是依賴$el。

#$options

• 類型：Object

• 僅可讀

• 詳細(xì)：

用于當(dāng)前組件實(shí)例的初始化選項(xiàng)。需要在選項(xiàng)中包含自定義 property 時(shí)會(huì)有用處：

  const app = Vue.createApp({
    customOption: 'foo',
    created() {
      console.log(this.$options.customOption) // => 'foo'
    }
  })

#$parent

• 類型：Vue instance

• 僅可讀

• 詳細(xì)：

父實(shí)例，如果當(dāng)前實(shí)例有的話。

#$root

• 類型：Vue instance

• 僅可讀

• 詳細(xì)：

當(dāng)前組件樹的根組件實(shí)例。如果當(dāng)前實(shí)例沒有父實(shí)例，此實(shí)例將會(huì)是其自己。

#$slots

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

• 僅可讀

• 詳細(xì)：

用來訪問被插槽分發(fā)的內(nèi)容。每個(gè)具名插槽有其相應(yīng)的 property (例如：v-slot:foo 中的內(nèi)容將會(huì)在 this.$slots.foo 中被找到)。default property 包括了所有沒有被包含在具名插槽中的節(jié)點(diǎn)，或 v-slot:default 的內(nèi)容。

在使用渲染函數(shù)書寫一個(gè)組件時(shí)，訪問 this.$slots 最有幫助。

• 示例：

  <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>

  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())
      ])
    }
  })

• 參考

• `` 組件

• 通過插槽分發(fā)內(nèi)容

• 渲染函數(shù) - 插槽

#$refs

• 類型：Object
• 僅可讀
• 詳細(xì)：

一個(gè)對(duì)象，持有注冊(cè)過 ref attribute 的所有 DOM 元素和組件實(shí)例。

• 參考
• 模板 refs
• 特殊 attributes - ref

#$attrs

• 類型：Object
• 僅可讀
• 詳細(xì)：

包含了父作用域中不作為組件 props 或自定義事件。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高階的組件時(shí)非常有用。

• 參考
• 非 Prop Attributes