1. $el
$el 是一个指向当前组件根元素的引用。在组件被挂载后，可以通过 $el 来访问和操作组件的根 DOM 元素。
<script>
export default {
mounted() {
console.log(this.$el); // 当前组件的根元素
},
};
</script>
2. $data
$data 是一个指向组件数据对象的引用，包含组件实例中声明的所有响应式数据。
<script>
export default {
data() {
return {
message: 'Hello, Vue 3.0!',
};
},
mounted() {
console.log(this.$data); // { message: 'Hello, Vue 3.0!' }
},
};
</script>
3. $props
$props 是一个指向组件接收到的所有 props 的引用。
<script>
export default {
props: ['propA', 'propB'],
mounted() {
console.log(this.$props); // { propA: ..., propB: ... }
},
};
</script>
4. $refs
$refs 包含了组件中所有拥有 ref 特性的子组件和元素。
<template>
<div ref="myDiv">This is a div</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myDiv); // 对应的 DOM 元素
},
};
</script>
5. $slots
$slots 包含了插槽的内容，可以通过名称访问具名插槽。
<template>
<div>
<slot name="header"></slot>
<slot></slot> <!-- 默认插槽 -->
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$slots.header); // 具名插槽的内容
console.log(this.$slots.default); // 默认插槽的内容
},
};
</script>
6. $options
$options 包含了实例初始化选项，其中包括 data、props、生命周期钩子等。
<script>
export default {
data() {
return {
message: 'Hello, Vue 3.0!',
};
},
mounted() {
console.log(this.$options.data()); // { message: 'Hello, Vue 3.0!' }
},
};
</script>
注意事项：
- 在 Vue 3.0 中，Vue 实例的属性被移动到了 app.config.globalProperties 中。你可以通过 app.config.globalProperties.$el、app.config.globalProperties.$data 等来访问这些属性。
- 在 Vue 3.0 中，实例属性的访问通常是在生命周期钩子或其他方法中进行的。在 setup 函数中，实例属性的访问方式会略有不同，需要通过第二个参数（context）来访问，例如 context.refs、context.attrs。
这些实例属性为你提供了访问组件实例中不同方面的信息的途径，可以根据需要使用它们来进行一些操作。
转载请注明出处：http://www.zyzy.cn/article/detail/573/Vue 3.0