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

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

欢迎来到 晷龙烬的博客小窝✨！这里记录技术学习点滴，分享实用技巧，偶尔聊聊奇思妙想～

原创内容✍️，转载请注明出处～感谢支持❤️！请尊重原创📩！欢迎在评论区交流🌟！

引言

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

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

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

Vue2 的写法（Options API） ‍ Vue2 组件由三部分组成，结构非常规整：

xml 复制代码

 <!-- 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，逻辑组织更灵活：

xml 复制代码

 <!-- 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 局部注册：

xml 复制代码

 <!-- ParentComponent.vue -->
 <template>
   <div>
     <MyButton />
   </div>
 </template>
 
 <script>
 import MyButton from './MyButton.vue';
 
 export default {
   components: { // 局部注册
     MyButton
   }
 }
 </script>

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

xml 复制代码

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

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

xml 复制代码

 <!-- ParentComponent.vue -->
 <template>
   <div>
     <MyButton />
   </div>
 </template>
 
 <script>
 import MyButton from './MyButton.vue';
 
 export default {
   components: {
     MyButton
   }
 }
 </script>

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

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

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

Vue2 中使用组件：

xml 复制代码

 <!-- 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>） ‍：

xml 复制代码

 <!-- 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中自如地玩转组件了！

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

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

✨ 至此结束 ✨

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

我是晷龙烬期待与你的下次相遇～