vue快速入门(三十二)局部与全局注册组件的步骤

注释很详细,直接上代码

上一篇

新增内容

  1. 局部注册组件
  2. 全局注册组件
    文件结构

源码

MyHeader.vue

html 复制代码
<!-- 用于测试全局注册组件 -->
<template>
    <div>
        <h1>又可以愉快的学习啦</h1>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less" scoped>

</style>

MyMain.vue

html 复制代码
<!-- 用于测试局部注册组件 -->
<template>
    <div id="mymain">
        <h2>啊对对对</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less" scoped>

</style>

App.vue

html 复制代码
<template>
  <div id="app">
  <!-- 也可以使用单标签 -->
    <MyHeader></MyHeader>
    <MyMain></MyMain>
  </div>
</template>

<script>
// 导入局部注册组件
import MyMain from './components/MyMain.vue';

export default {
  name: 'App',
  components: {//注册局部注册组件(如果前后名字一致也可以写成MyMain)
   MyMain:MyMain,
  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}
</style>

main.js

js 复制代码
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//全局导入组件
import MyHeader from './components/MyHeader.vue'

//全局注册组件
Vue.component('MyHeader',MyHeader)

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

效果演示

相关推荐
一只小风华~1 天前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟1 天前
html 实现鼠标滑动点亮横轴
前端·javascript·html
计算机学姐1 天前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA1 天前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
iCoding911 天前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou331 天前
使用 Service Worker 限制请求并发数
前端
张可爱1 天前
20251017-Vue2八股文整理(上篇)
前端
FanetheDivine1 天前
ts中如何描述一个复杂函数的类型
前端·typescript
lightgis1 天前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络1 天前
Vue3 原生移动应用开发来了
前端·javascript·css