当前位置：首页 > news >正文

2.2 vue2子组件注册使用

news 2025/8/5 9:50:10

安装插件

VSCode中实现Vue2代码高亮，推荐使用 Vetur 插件。这是Vue官方推荐的开发工具，专门为Vue.js设计，支持.vue文件的语法高亮、智能提示、代码格式化等功能。

安装方法：

打开VSCode
进入扩展面板（快捷键 Ctrl+Shift+X）
搜索 Vetur 并安装
重启VSCode使插件生效

特点：

支持Vue2单文件组件（.vue）的完整语法高亮
包含模板、脚本和样式区域的分别高亮
提供代码片段和智能提示
支持格式化和错误检查

注意：如果是Vue3项目，建议使用Vue (Official) --原Volar插件替代Vetur。

注册组件

局部注册一个欢迎卡片组件

1. 子组件：`WelcomeCard.vue`

<!-- components/WelcomeCard.vue -->
<template><div class="card"><h2>🎉 欢迎使用 Vue 2</h2><p>这是一个局部注册的组件</p></div>
</template><script>
export default {name: 'WelcomeCard'
}
</script><style scoped>
.card {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;border-radius: 12px;padding: 30px;margin: 20px auto;width: 80%;max-width: 400px;text-align: center;box-shadow: 0 8px 20px rgba(0,0,0,0.1);transition: transform 0.3s ease;
}.card:hover {transform: translateY(-5px);
}.card h2 {margin: 0 0 10px 0;font-size: 24px;
}.card p {margin: 0;font-size: 16px;opacity: 0.9;
}
</style>

2. 父组件：`App.vue`（局部注册）

<!-- App.vue -->
<template><div id="app"><welcome-card /><welcome-card /></div>
</template><script>
// 导入组件
import WelcomeCard from './components/WelcomeCard.vue';export default {name: 'App',// 局部注册components: {WelcomeCard}
}
</script><style>
#app {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background-color: #f0f2f5;min-height: 100vh;display: flex;flex-direction: column;align-items: center;padding: 40px 20px;
}
</style>

3. `main.js`（无需修改）

import Vue from 'vue'
import App from './App.vue'new Vue({render: h => h(App)
}).$mount('#app')

🎉 效果说明

页面居中显示两个美观的渐变卡片，带有悬停动效。
WelcomeCard 组件被局部注册在 App.vue 中，只在当前组件可用。
无参数传递，组件内容是固定的。

全局注册 `WelcomeCard` 组件

1. 子组件：`WelcomeCard.vue`（保持不变）

2. 入口文件：`main.js`（关键：全局注册）

// main.js
import Vue from 'vue'
import App from './App.vue'// 导入组件
import WelcomeCard from './components/WelcomeCard.vue'// 全局注册组件
Vue.component('WelcomeCard', WelcomeCard)
// 或使用 kebab-case: Vue.component('welcome-card', WelcomeCard)Vue.config.productionTip = falsenew Vue({render: h => h(App)
}).$mount('#app')

3. 父组件：`App.vue`（无需导入或注册，直接使用）

<!-- App.vue -->
<template><div id="app"><h1 style="color: #333; margin-bottom: 30px;">Vue 2 全局组件示例</h1><welcome-card /><welcome-card /></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background-color: #f0f2f5;min-height: 100vh;display: flex;flex-direction: column;align-items: center;padding: 40px 20px;
}
</style>