Vue 3.0 實例property

#$data

• 類型：Object

• 詳細：

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

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

#$props

• 類型：Object

• 詳細：

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

#$el

• 類型：any

• 僅可讀

• 詳細：

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

#$options

• 類型：Object

• 僅可讀

• 詳細：

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

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

#$parent

• 類型：Vue instance

• 僅可讀

• 詳細：

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

#$root

• 類型：Vue instance

• 僅可讀

• 詳細：

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

#$slots

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

• 僅可讀

• 詳細：

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

在使用渲染函數(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
• 僅可讀
• 詳細：

一個對象，持有注冊過 ref attribute 的所有 DOM 元素和組件實例。

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

#$attrs

• 類型：Object
• 僅可讀
• 詳細：

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

• 參考
• 非 Prop Attributes