Vue 的内置属性-优快云博客

Vue 的内置属性是框架提供的特殊属性和功能，用于增强组件的交互能力和开发体验。以下是 Vue 内置属性的分类及核心详解：

一、组件实例属性（以 `$` 开头）

通过 this（选项式 API）或 setup() 上下文访问，提供对组件实例的操作能力：

$el

用途：获取组件渲染后的根 DOM 元素。

示例：

// 选项式 API
this.$el.querySelector('.btn').addEventListener('click', this.handleClick)

$slots

用途：访问模板中的插槽内容（默认插槽和具名插槽）。

示例：

<!-- 父组件 -->
<Child>
  <template #header>标题</template>
  <p>默认内容</p>
</Child>

<!-- 子组件 -->
<template>
  <header><slot name="header" /></header>
  <main><slot /></main>
</template>

<script>
// 子组件中访问插槽
export default {
  mounted() {
    console.log(this.$slots.header?.()) // 输出具名插槽内容
    console.log(this.$slots.default?.()) // 输出默认插槽内容
  }
}
</script>

$attrs

用途：获取父组件传递的未声明为 props 的属性（包含 class 和 style，Vue3 新特性）。

示例：

<!-- 父组件 -->
<Child class="custom-class" data-id="123" />

<!-- 子组件 -->
<template>
  <div v-bind="$attrs">子组件内容</div>
</template>

<script>
export default {
  inheritAttrs: false, // 关闭自动属性继承
  mounted() {
    console.log(this.$attrs) // 输出 { class: 'custom-class', 'data-id': '123' }
  }
}
</script>

$refs

用途：访问模板中通过 ref 绑定的 DOM 元素或组件实例。

示例：

<template>
  <input ref="inputRef" />
  <ChildComponent ref="childRef" />
</template>

<script>
export default {
  mounted() {
    this.$refs.inputRef.focus() // 操作 DOM 元素
    this.$refs.childRef.someMethod() // 调用子组件方法
  }
}
</script>

$emit

用途：触发自定义事件（选项式 API）。

示例：

<!-- 父组件 -->
<Child @custom-event="handleEvent" />

<!-- 子组件 -->
<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('custom-event', { data: '传递数据' })
    }
  }
}
</script>

$nextTick

用途：在 DOM 更新后执行回调。

示例：

this.message = '更新内容'
this.$nextTick(() => {
  console.log(this.$el.textContent) // 确保获取更新后的 DOM 内容
})

$root / $parent / $children

用途：访问根组件、父组件或子组件实例（慎用，破坏组件封装）。

示例：

this.$root.sharedData = '全局数据' // 访问根组件数据
console.log(this.$parent.$options.name) // 访问父组件名称

二、选项式 API 配置属性

在组件定义时通过选项对象配置，定义组件行为：

data
- 用途：定义组件状态（必须为函数，返回对象）。
- 示例：
```
export default {
  data() {
    return { count: 0 }
  }
}
```

props

用途：声明组件接收的外部属性（支持类型校验和默认值）。

示例：

export default {
  props: {
    title: { type: String, default: '默认标题' },
    modelValue: [String, Number] // Vue3 支持多类型
  }
}

computed

用途：定义计算属性（支持 getter/setter）。

示例：

export default {
  computed: {
    reversedMessage: {
      get() {
        return this.message.split('').reverse().join('')
      },
      set(value) {
        this.message = value.split('').reverse().join('')
      }
    }
  }
}

methods

用途：定义组件方法。

示例：

export default {
  methods: {
    handleClick() {
      this.count++
    }
  }
}

watch

用途：监听数据变化（支持深度监听和立即执行）。

示例：

export default {
  watch: {
    query: {
      handler(newVal) {
        this.fetchData(newVal)
      },
      immediate: true, // 立即执行
      deep: true // 深度监听对象
    }
  }
}

emits

用途：声明组件触发的自定义事件（Vue3 新增，增强类型检查）。

示例：

export default {
  emits: ['submit', 'update:modelValue'],
  methods: {
    submitForm() {
      this.$emit('submit', this.formData)
    }
  }
}

三、Composition API 专属属性

在 setup() 函数中通过参数或导入获取：

props

用途：响应式代理对象，直接解构需用 toRefs。

示例：

import { toRefs } from 'vue'

export default {
  setup(props) {
    const { title } = toRefs(props)
    return { title }
  }
}

context（或 setupContext）

用途：包含 attrs, slots, emit 的上下文对象。

示例：

export default {
  setup(props, { attrs, slots, emit }) {
    emit('custom-event')
    return { attrs, slots }
  }
}

refs

用途：通过 ref() 创建响应式引用。

示例：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const inputRef = ref(null)

    onMounted(() => {
      inputRef.value.focus()
    })

    return { count, inputRef }
  }
}

四、全局配置属性

通过 app.config 配置的全局行为：

app.config.globalProperties

用途：添加全局属性（替代 Vue2 的 Vue.prototype）。

示例：

import { createApp } from 'vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios

app.config.errorHandler

用途：全局错误处理。

示例：

app.config.errorHandler = (err) => {
  console.error('全局错误:', err)
}

五、生命周期钩子

Vue3 使用 onXxx 形式的组合式 API 钩子：

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件挂载')
    })

    onUnmounted(() => {
      console.log('组件卸载')
    })
  }
}

六、常用内置属性详解

1. `is` 属性

用途：动态组件切换，支持组件和 HTML 元素。

示例：

<template>
  <component :is="currentTabComponent" />
</template>

<script>
import TabA from './TabA.vue'
import TabB from './TabB.vue'

export default {
  data() {
    return { currentTab: 'A' }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab === 'A' ? TabA : TabB
    }
  }
}
</script>

2. `key` 属性

用途：优化虚拟 DOM 更新，强制重新渲染。

示例：

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

3. `ref` 属性

用途：注册 DOM 元素或子组件引用。

示例：

<template>
  <input ref="inputRef" />
  <ChildComponent ref="childRef" />
</template>

<script>
import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const inputRef = ref(null)
    const childRef = ref(null)

    onMounted(() => {
      inputRef.value.focus()
      childRef.value.someMethod()
    })

    return { inputRef, childRef }
  }
}
</script>