首页
/ 正文

Vue3 内置属性（超详细）

更新时间: 2025-04-14 20:53:20

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;

《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习，欢迎点击围观

前言：Vue3 内置属性的探索之旅

在前端开发领域，Vue.js 凭借其简洁的语法和高效的组件化架构，成为开发者构建现代 Web 应用的首选框架之一。随着 Vue3 的发布，其底层机制和 API 设计进一步优化，为开发者提供了更强大的工具链。在众多 Vue3 的特性中，内置属性（Built-in Properties）作为连接组件逻辑与视图的关键桥梁，是理解框架运行原理的核心知识点。无论是初学者搭建第一个项目，还是中级开发者优化复杂应用，掌握这些内置属性的用法与背后的设计理念，都能显著提升开发效率和代码质量。

本文将从基础概念出发，结合实际案例，深入解析 Vue3 中最常用的内置属性，如 ref、$attrs、$slots、$emit 等。通过循序渐进的讲解，帮助读者建立对 Vue3 内部机制的清晰认知，并掌握如何在实际项目中灵活运用这些属性解决问题。

一、Vue3 的 `ref` 属性：组件实例的“身份证”

在 Vue 开发中，ref 是一个极为重要的内置属性，它允许开发者直接访问组件或 DOM 元素的实例。可以将其想象为给每个组件或元素分配一个“身份证号码”，方便后续通过代码操作其内部状态或方法。

1.1 `ref` 的基础用法

在模板中，通过 ref 属性为组件或元素命名，Vue 会自动将这些引用收集到组件的 $refs 对象中。例如：

<template>
  <ChildComponent ref="childRef" />
  <div ref="messageContainer">Hello Vue3</div>
</template>

<script setup>
import { ref } from 'vue';
const childRef = ref(null); // 声明一个 ref 响应式变量
const messageContainer = ref(null); // 声明 DOM 元素引用
</script>

在 <script setup> 中，通过 ref 声明的变量会自动与模板中的 ref 属性绑定。当组件或元素挂载完成后，childRef.value 将指向子组件的实例，而 messageContainer.value 则指向对应的 DOM 元素。

1.2 `ref` 的高级场景：跨组件通信

假设有一个父组件需要调用子组件的某个方法，此时可以通过 ref 实现直接通信：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent ref="childRef" />
  <button @click="callChildMethod">触发子组件方法</button>
</template>

<script setup>
import { ref } from 'vue';
const childRef = ref(null);

const callChildMethod = () => {
  childRef.value?.showMessage(); // 安全调用子组件的 showMessage 方法
};
</script>

在子组件中，定义 showMessage 方法：

<!-- ChildComponent.vue -->
<script setup>
const showMessage = () => {
  alert('Hello from Child!');
};
</script>

通过这种方式，父组件无需通过 Props 或 Events 传递数据，即可直接操作子组件的逻辑，但需注意过度使用 ref 可能破坏组件的封装性。

二、Vue3 的 `$attrs` 和 `$slots`：组件间“包裹与传递”的艺术

Vue 的组件化设计强调“高内聚、低耦合”，而 $attrs 和 $slots 正是实现这一目标的关键属性。它们分别负责传递未声明的 Props 和管理插槽内容，如同给组件包裹了一层“可定制的外衣”。

2.1 `$attrs`：未声明 Props 的“兜底箱”

当父组件传递给子组件的 Props 未在子组件中声明时，这些 Props 会自动收集到 $attrs 对象中。开发者可通过 $attrs 将未声明的 Props 转发给子组件的后代组件：

<!-- GrandChildComponent.vue -->
<template>
  <div v-bind="$attrs"> <!-- 转发所有未声明的 Props -->
    {{ message }}
  </div>
</template>

<script setup>
defineProps({
  message: String,
});
</script>

父组件调用时：

<template>
  <ChildComponent 
    message="Hello" 
    custom-style="color: red" 
    :dynamic-prop="dynamicValue"
  />
</template>

此时，custom-style 和 dynamicProp 未在 ChildComponent 中声明，会被自动收集到 $attrs 中，并通过 <GrandChildComponent v-bind="$attrs" /> 转发给 GrandChildComponent。

2.2 `$slots`：插槽内容的“可替换容器”

Vue 的插槽（Slots）允许父组件向子组件中“插入”自定义内容。通过 $slots 属性，子组件可以动态渲染或操作这些插槽内容：

<!-- CustomCard.vue -->
<template>
  <div class="card">
    <header v-if="$slots.header">
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 默认插槽 -->
    </main>
    <footer v-if="$slots.footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件使用时：

<template>
  <CustomCard>
    <template #header>
      <h1>标题内容</h1>
    </template>
    <p>主内容</p>
    <template #footer>
      <button>提交</button>
    </template>
  </CustomCard>
</template>

子组件通过检查 $slots.header 和 $slots.footer 的存在性，动态决定是否渲染对应的插槽区域，从而实现灵活的内容布局。

三、Vue3 的 `$emit`：事件驱动的“信号发射器”

在 Vue 的响应式系统中，组件间的通信通常遵循“自上而下 Props，自下而上 Events”的原则。$emit 是子组件向父组件发送消息的核心工具，如同一个“信号发射器”，触发父组件定义的监听函数。

3.1 基础事件传递

子组件通过 $emit(eventName, ...args) 触发事件，父组件通过 v-on 或 @ 监听事件：

<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['custom-event']);
const triggerEvent = () => {
  emit('custom-event', 'Hello from Child!');
};
</script>

父组件监听并处理事件：

<template>
  <ChildComponent @custom-event="handleEvent" />
</template>

<script setup>
const handleEvent = (message) => {
  console.log(message); // 输出 "Hello from Child!"
};
</script>

3.2 自定义事件的“命名规范”与“参数传递”

为确保事件的可维护性，建议遵循以下规范：

事件名使用 kebab-case，例如 user-selected
通过参数传递具体数据，避免直接操作父组件的内部状态
例如，一个按钮组件触发选中事件：

<!-- ButtonComponent.vue -->
<template>
  <button @click="handleClick">点击选择</button>
</template>

<script setup>
const emit = defineEmits(['select']);
const handleClick = () => {
  emit('select', { id: 1, name: 'Vue3' });
};
</script>

父组件接收并处理选中项：

<script setup>
const handleSelect = (item) => {
  console.log('选中项:', item);
};
</script>

通过这种方式，组件间的交互更加清晰且易于调试。

四、Vue3 的 `$parent` 和 `$children`：组件树的“家族关系”

Vue3 的组件实例还提供了 $parent 和 $children 属性，用于直接访问组件树中的上下文关系。但需注意，过度使用这些属性可能破坏组件的独立性，因此需谨慎使用。

4.1 `$parent`：向上查找“父辈”

通过 $parent 可以访问当前组件的直接父组件，适用于需要访问父级数据或方法的场景：

<!-- ChildComponent.vue -->
<script setup>
const parentMessage = computed(() => {
  return $parent.message; // 直接访问父组件的 message 属性
});
</script>

但更推荐通过 Props 和 Events 进行通信，避免直接依赖 $parent。

4.2 `$children`：向下遍历“子辈”

$children 返回一个包含所有直接子组件实例的数组，但其顺序和内容可能因组件结构变化而不可靠。例如：

<!-- ParentComponent.vue -->
<script setup>
const updateChild = () => {
  const child = $children.find(c => c.$options.name === 'Child');
  child?.updateState();
};
</script>

由于 $children 的不确定性，建议通过 ref 显式引用需要操作的子组件，而非依赖此属性。

五、实践案例：综合运用内置属性构建可复用组件

以下案例将综合使用 ref、$emit、$attrs 和 $slots，实现一个具备表单验证功能的可复用输入组件。

5.1 组件设计目标

支持自定义输入类型（文本、数字、邮箱等）
通过 Props 接收验证规则，并通过 $emit 触发验证结果
通过 $attrs 转发未声明 Props 到原生输入元素
使用插槽实现自定义标签和错误提示

5.2 代码实现

<!-- ValidatedInput.vue -->
<template>
  <div class="input-container">
    <label v-if="$slots.label">
      <slot name="label"></slot>
    </label>
    <input 
      v-bind="$attrs" 
      :type="type" 
      :value="modelValue" 
      @input="$emit('update:modelValue', $event.target.value)"
      @blur="validate"
    />
    <div v-if="error" class="error-message">
      <slot name="error" :message="error">{{ error }}</slot>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  type: { type: String, default: 'text' },
  modelValue: String,
  rules: Array, // 验证规则数组
});

const emit = defineEmits(['update:modelValue', 'validation']);

const error = ref('');

const validate = () => {
  const errors = props.rules?.map(rule => rule(props.modelValue)) || [];
  error.value = errors.find(e => e) || '';
  emit('validation', error.value);
};
</script>

5.3 父组件使用示例

<template>
  <ValidatedInput 
    v-model="email" 
    :rules="[validateEmail]" 
    placeholder="请输入邮箱"
    class="custom-input" 
    @validation="handleValidation"
  >
    <template #label>
      <span>Email 地址</span>
    </template>
    <template #error="{ message }">
      <span style="color: red">{{ message }}</span>
    </template>
  </ValidatedInput>
</template>

<script setup>
import { ref } from 'vue';

const email = ref('');
const validateEmail = (value) => {
  return !/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(value) 
    ? '邮箱格式错误' 
    : false;
};

const handleValidation = (error) => {
  console.log('验证结果:', error);
};
</script>

此案例展示了内置属性如何协同工作：通过 v-bind="$attrs" 转发样式类，$slots 定制标签和错误提示，$emit 传递验证结果，最终实现了一个功能强大的可复用组件。

结论：掌握内置属性，解锁 Vue3 的深层潜力

Vue3 的内置属性如同框架内部的“接口文档”，它们的存在让开发者能够精准控制组件的行为与交互。从 ref 的直接引用到 $emit 的事件驱动，从 $attrs 的 Props 转发到 $slots 的内容插槽，这些工具共同构建了 Vue3 强大的组件化生态。

对于初学者，建议从简单案例入手，逐步理解每个属性的核心作用；中级开发者则可通过组合使用这些属性，设计出高内聚、低耦合的复杂组件。记住，内置属性的合理运用不仅能提升代码质量，更能帮助开发者在遇到问题时快速定位和调试。

未来，随着 Vue3 的持续迭代和社区生态的繁荣，内置属性的功能与用法也将不断扩展。保持对框架更新的关注，并结合实际项目实践，你将能够更从容地应对前端开发的挑战！

Vue3 内置属性（超详细）

前言：Vue3 内置属性的探索之旅

一、Vue3 的 `ref` 属性：组件实例的“身份证”

1.1 `ref` 的基础用法

1.2 `ref` 的高级场景：跨组件通信

二、Vue3 的 `$attrs` 和 `$slots`：组件间“包裹与传递”的艺术

2.1 `$attrs`：未声明 Props 的“兜底箱”

2.2 `$slots`：插槽内容的“可替换容器”

三、Vue3 的 `$emit`：事件驱动的“信号发射器”

3.1 基础事件传递

3.2 自定义事件的“命名规范”与“参数传递”

四、Vue3 的 `$parent` 和 `$children`：组件树的“家族关系”

4.1 `$parent`：向上查找“父辈”

4.2 `$children`：向下遍历“子辈”

五、实践案例：综合运用内置属性构建可复用组件

5.1 组件设计目标

5.2 代码实现

5.3 父组件使用示例

结论：掌握内置属性，解锁 Vue3 的深层潜力

最新发布

Webstorm 2025.1.1 最新激活码，破解版安装教程（至2099年~）

Pycharm 2025.1.1 最新激活码，破解版安装教程（至2099年~）

DataGrip 2025.1.2 最新激活码，破解版安装教程（至2099年~）

Clion 2025.1.1 最新激活码，破解版安装教程（至2099年~）

IDEA 2025.1.1.1 最新激活码，破解版安装教程（至2099年~）

GoLand 2025.1.1 最新激活码，破解版安装教程（至2099年~）

PhpStorm 2025.1.1 最新激活码，破解版安装教程

Rider 2025.1.2 最新激活码，破解版安装教程

Rider 2025.1.1 最新破解版安装教程（附激活码~）

Clion 2025.1 最新激活码，破解版安装教程（至2099年~）

Vue3 内置属性（超详细）

前言：Vue3 内置属性的探索之旅

一、Vue3 的 ref 属性：组件实例的“身份证”

1.1 ref 的基础用法

1.2 ref 的高级场景：跨组件通信

二、Vue3 的 $attrs 和 $slots：组件间“包裹与传递”的艺术

2.1 $attrs：未声明 Props 的“兜底箱”

2.2 $slots：插槽内容的“可替换容器”

三、Vue3 的 $emit：事件驱动的“信号发射器”

3.1 基础事件传递

3.2 自定义事件的“命名规范”与“参数传递”

四、Vue3 的 $parent 和 $children：组件树的“家族关系”

4.1 $parent：向上查找“父辈”

4.2 $children：向下遍历“子辈”

五、实践案例：综合运用内置属性构建可复用组件

5.1 组件设计目标

5.2 代码实现

5.3 父组件使用示例

结论：掌握内置属性，解锁 Vue3 的深层潜力

最新发布

Webstorm 2025.1.1 最新激活码，破解版安装教程（至2099年~）

Pycharm 2025.1.1 最新激活码，破解版安装教程（至2099年~）

DataGrip 2025.1.2 最新激活码，破解版安装教程（至2099年~）

Clion 2025.1.1 最新激活码，破解版安装教程（至2099年~）

IDEA 2025.1.1.1 最新激活码，破解版安装教程（至2099年~）

GoLand 2025.1.1 最新激活码，破解版安装教程（至2099年~）

PhpStorm 2025.1.1 最新激活码，破解版安装教程

Rider 2025.1.2 最新激活码，破解版安装教程

Rider 2025.1.1 最新破解版安装教程（附激活码~）

Clion 2025.1 最新激活码，破解版安装教程（至2099年~）

一、Vue3 的 `ref` 属性：组件实例的“身份证”

1.1 `ref` 的基础用法

1.2 `ref` 的高级场景：跨组件通信

二、Vue3 的 `$attrs` 和 `$slots`：组件间“包裹与传递”的艺术

2.1 `$attrs`：未声明 Props 的“兜底箱”

2.2 `$slots`：插槽内容的“可替换容器”

三、Vue3 的 `$emit`：事件驱动的“信号发射器”

四、Vue3 的 `$parent` 和 `$children`：组件树的“家族关系”

4.1 `$parent`：向上查找“父辈”

4.2 `$children`：向下遍历“子辈”