Vue 组件入门学习笔记：局部注册、全局注册与 Props 传值详解

作为 Vue 初学者，组件是绕不开的核心知识点。今天就来整理一下组件的注册方式和 ** 组件间数据传递（Props）** 的核心内容，既是自己的学习总结，也希望能帮到同样入门的小伙伴～

一、组件的局部注册：三步走实现组件复用

局部注册是指仅在当前组件内可使用 的注册方式，适合按需引入的场景。核心流程分三步：引入组件 → 注册组件 → 模板中使用。

示例代码（以App.vue引入Header.vue为例）

vue

<!-- App.vue -->
<template>
  <!-- 第三步：模板中使用组件 -->
  <Header /> 
  <Main />
  <Aside />
</template>

<script>
// 第一步：引入需要注册的组件
import Header from "./pages/Header.vue"
import Main from "./pages/Main.vue"
import Aside from "./pages/Aside.vue"

export default {
  // 第二步：在components选项中注册组件
  components: {
    Header,
    Main,
    Aside
  }
}
</script>

核心逻辑 ：通过import引入组件文件，在components选项中声明后，就能在当前组件的模板中以标签形式使用了。这种方式的好处是 "用多少引多少"，非常灵活～

二、组件的全局注册：一次注册，全局可用

全局注册是指在项目入口文件（如main.js）中注册组件，注册后所有组件都能直接使用，无需重复引入。

示例代码（在main.js中全局注册Header组件）

javascript

运行

// main.js
import { createApp } from 'vue'
import App from './App.vue'
// 引入要全局注册的组件
import Header from "./pages/Header.vue"

const app = createApp(App)

// 全局注册：第一个参数是组件名，第二个是组件对象
app.component("Header", Header)

app.mount('#app')

优点 ：全局组件在任何地方都能直接用，不用重复引入和注册。缺点：

1. 即使某个页面没用到该组件，打包时也会被包含进去，增加包体积；
2. 大型项目中依赖关系不明确，维护起来比较麻烦。

所以，全局注册适合项目中频繁复用的 "基础组件" （如按钮、输入框），普通业务组件更推荐局部注册～

三、组件间数据传递：Props 实现父传子

Vue 中组件是独立的，想要实现 "父组件给子组件传数据"，就需要用到Props 。它的核心规则是：只能父传子，传值无数量 / 类型限制，但子组件不能直接修改父传的值。

1. Props 的基本使用流程（父传子）

以ComponentA（父）向ComponentB（子）传值为例：

vue

<!-- ComponentA.vue（父组件） -->
<template>
  <h3>ComponentA</h3>
  <!-- 第一步：在子组件标签上绑定要传递的数据 -->
  <ComponentB :title="title" :age="age" :names="names"/>
</template>

<script>
import ComponentB from "./ComponentB.vue"
export default {
  components: { ComponentB },
  data() {
    return {
      title: "标题",
      age: 20,
      names: ["iwen", "ime"]
    }
  }
}
</script>

vue

<!-- ComponentB.vue（子组件） -->
<template>
  <p>{{ title }}</p>
  <p>{{ age }}</p>
  <p v-for="(item,index) of names" :key="index">{{ item }}</p>
</template>

<script>
export default {
  // 第二步：子组件通过props选项声明接收的数据
  props: ["title", "age", "names"]
}
</script>

2. Props 的高级配置（类型、默认值、必填项）

实际开发中，我们需要对 Props 做类型限制、默认值设置、必填校验，让组件更健壮。

vue

<!-- ComponentB.vue（子组件） -->
<script>
export default {
  props: {
    // 限制title的类型可以是字符串、数字、数组、对象
    title: {
      type: [String, Number, Array, Object],
      required: true // 表示title是必填项
    },
    // 限制age的类型是数字，默认值为0
    age: {
      type: Number,
      default: 0
    },
    // 数组/对象的默认值必须用工厂函数返回
    names: {
      type: Array,
      default() {
        return ["空"]
      }
    }
  }
}
</script>

关键注意点：

• type支持的类型有String、Number、Boolean、Array、Object、Date、Function、Symbol；
• 数组 / 对象的default必须用工厂函数返回，否则会导致所有实例共享同一个默认值；
• required: true表示该 Props 是必填项，父组件必须传递。

3. 千万注意：子组件不能直接修改 Props 的值

Vue 规定Props 是 "单向数据流" ，子组件只能读取 Props 的值，不能直接修改。如果强行修改，控制台会报错～

vue

<!-- 错误示范！子组件不能直接修改父传的props -->
<script>
export default {
  props: ["title"],
  methods: {
    updateHandle() {
      this.title = "新数据" // 报错！不允许直接修改props
    }
  }
}
</script>

如果需要修改，正确的做法是：子组件通过事件（$emit）通知父组件，由父组件来修改数据。

总结：组件注册与传值核心要点

• 组件注册：局部注册 "按需引入" 灵活，全局注册 "一次注册到处用" 但要慎用；
• Props 传值：父传子的核心方式，支持类型限制、默认值、必填校验，且子组件不能直接修改 Props。