Vue组件使用三步走：创建、注册、使用（Vue2/Vue3双版本详解）

🔥 以龙息淬炼代码，在时光灰烬中重铸技术星河！

欢迎来到 晷龙烬的博客小窝✨！

这里记录技术学习点滴，分享实用技巧，偶尔聊聊奇思妙想～

原创内容✍️，转载请注明出处～感谢支持❤️！请尊重原创📩！

欢迎在评论区交流🌟！

引言

朋友们好！Vue的组件化开发就像搭乐高，但很多同学在Vue2和Vue3之间切换时会有点懵：写法好像不一样了？别担心！今天我就用最直白的方式，把Vue2和Vue3中使用组件的三个核心步骤------创建、注册、使用，给你一次性讲清楚，还附上双版本代码对比，保证你看完就能用！

一、第一步：创建组件 ------ 打造你的"乐高积木"

无论是Vue2还是Vue3，创建组件的基本思想都一样：创建一个独立的.vue文件。但里面的写法有些区别。

**Vue2 的写法（Options API）**‍

Vue2 组件由三部分组成，结构非常规整：

vue 复制代码

<!-- MyButton.vue -->
<template>
  <button class="btn" @click="handleClick">
    {{ buttonText }}
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: { // 定义接收的参数
    buttonText: {
      type: String,
      default: '点击我'
    }
  },
  methods: {
    handleClick() {
      this.$emit('btn-click'); // 触发自定义事件
    }
  }
}
</script>

<style scoped>
.btn {
  padding: 10px 20px;
  background: #409eff;
  color: white;
  border-radius: 4px;
}
</style>

**Vue3 的写法（Composition API）**‍

Vue3 推荐使用 Composition API，逻辑组织更灵活：

vue 复制代码

<!-- MyButton.vue -->
<template>
  <!-- 模板部分和Vue2几乎一样 -->
  <button class="btn" @click="handleClick">
    {{ buttonText }}
  </button>
</template>

<script setup> <!-- 使用 <script setup> 语法糖，更简洁 -->
import { defineProps, defineEmits } from 'vue';

// 定义props
const props = defineProps({
  buttonText: {
    type: String,
    default: '点击我'
  }
});

// 定义emit事件
const emit = defineEmits(['btn-click']);

const handleClick = () => {
  emit('btn-click'); // 触发事件
};
</script>

<style scoped>
/* 样式部分完全一样 */
.btn {
  padding: 10px 20px;
  background: #409eff;
  color: white;
  border-radius: 4px;
}
</style>

小结：创建组件时，Vue2用Options API（data、methods分开写），Vue3推荐Composition API（用<script setup>更简洁）。但模板和样式写法几乎一样！

二、第二步：注册组件 ------ 告诉Vue"这块积木怎么用"

组件创建好后，需要在父组件中注册才能使用。同样有全局注册和局部注册两种方式。

**1. 全局注册（在任何地方都能用）**‍

Vue2 全局注册：

javascript 复制代码

// main.js
import Vue from 'vue';
import App from './App.vue';
import MyButton from './components/MyButton.vue';

Vue.component('MyButton', MyButton); // 全局注册

new Vue({
  render: h => h(App),
}).$mount('#app');

Vue3 全局注册：

javascript 复制代码

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyButton from './components/MyButton.vue';

const app = createApp(App);
app.component('MyButton', MyButton); // 全局注册
app.mount('#app');

**2. 局部注册（只在当前组件用，更常用）**‍

Vue2 局部注册：

vue 复制代码

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyButton />
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: { // 局部注册
    MyButton
  }
}
</script>

**Vue3 局部注册（使用 <script setup>）**‍：

vue 复制代码

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyButton />
  </div>
</template>

<script setup>
import MyButton from './MyButton.vue';
// 在 <script setup> 中，导入的组件自动注册，无需显式声明！
</script>

**Vue3 局部注册（不使用 <script setup>）**‍：

vue 复制代码

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyButton />
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton
  }
}
</script>

小结：注册方式基本一致，但Vue3的<script setup>语法下，导入的组件自动注册，更省事！

三、第三步：使用组件 ------ 把"积木"搭起来

注册成功后，就可以在模板中像使用HTML标签一样使用组件了。这里重点讲组件之间的通信（传参和事件）。

Vue2 中使用组件：

vue 复制代码

<!-- ParentComponent.vue -->
<template>
  <div>
    <!-- 1. 传递静态或动态参数 -->
    <MyButton button-text="点我试试" />
    <MyButton :button-text="dynamicText" />
    
    <!-- 2. 监听子组件触发的事件 -->
    <MyButton @btn-click="handleButtonClick" />
    
    <!-- 3. 综合使用 -->
    <MyButton 
      :button-text="btnText" 
      @btn-click="handleButtonClick" 
    />
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: { MyButton },
  data() {
    return {
      dynamicText: '动态文本',
      btnText: '提交',
      count: 0
    };
  },
  methods: {
    handleButtonClick() {
      this.count++;
      console.log(`按钮被点击了 ${this.count} 次`);
    }
  }
}
</script>

**Vue3 中使用组件（使用 <script setup>）**‍：

vue 复制代码

<!-- ParentComponent.vue -->
<template>
  <div>
    <!-- 使用方式一模一样！ -->
    <MyButton button-text="点我试试" />
    <MyButton :button-text="dynamicText" />
    <MyButton @btn-click="handleButtonClick" />
    
    <MyButton 
      :button-text="btnText" 
      @btn-click="handleButtonClick" 
    />
  </div>
</template>

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

const dynamicText = ref('动态文本');
const btnText = ref('提交');
const count = ref(0);

const handleButtonClick = () => {
  count.value++;
  console.log(`按钮被点击了 ${count.value} 次`);
};
</script>

关键点总结：

模板中使用方式完全一致 ：无论是Vue2还是Vue3，在模板中都是用<组件名 />的方式使用。
Vue3的<script setup>更简洁：无需显式注册组件，变量和函数也不用return。
通信机制一样 ：都是通过props传数据进去，通过$emit（Vue2）/ emit（Vue3）触发事件出来。

结语

看，其实Vue2和Vue3在使用组件的核心三步上是一脉相承的：

创建：写一个.vue文件，Vue2用Options API，Vue3推荐Composition API。
注册：全局注册或局部注册，Vue3的<script setup>让局部注册更简单。
使用：在模板中当标签用，通过props和events与父组件通信。

最大的变化是Vue3的Composition API让逻辑组织更灵活，<script setup>语法让代码更简洁。但万变不离其宗，掌握了这三个步骤，你就能在Vue2和Vue3中自如地玩转组件了！

赶紧找个项目试试吧，把页面拆成一个个组件，体验一下搭积木的快乐！

------ 完 ------

✨ 至此结束 ✨

💡 点赞关注，解锁更多技术干货！

我是晷龙烬

期待与你的下次相遇～