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

代码对我眨眼睛2024-04-25 11:23

注释很详细，直接上代码

新增内容

局部注册组件

全局注册组件
文件结构

源码

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')

效果演示