Vue组建的局部注册

局部注册的介绍

局部注册是在当前的组件中注册子组件，注册后的子组件只能在当前组件及其子组件中使用。如果你无法快速的分清楚局部注册和全局注册，那么请记住，不涉及到main.js就是局部注册。

了解了vue组件局部注册的概念和区别后，接下来我将详细给你讲解局部注册的具体步骤。

第一步：创建子组件

如果你看了我使用了vue工程化开发(如果你不会，我将注册创建vue工程化开发的教程放在下方，你可以点击先去看那一篇文章)，在vue工程化开发中，你将看到一个文件夹叫做components,在这里我们将创建我们的组件 WsArt.vue，然后进行编辑，例如：

<template>
  <div>
    <h1>欢迎阅读</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>
</style>

导出子组件

在App.vue的<script>标签中，使用import语句导入我们刚刚在components中创建的子组件。

import 组件名 from ‘组件名所在的位置‘

import WsArt from ‘./components/WsArt.vue’

这样我们就导入子组件成功，但是你会发现前端依旧是报错的，是因为我们没有注册和使用。

注册组件

在App.vue的<script>标签默认导出中注册组件，即：

export default {
    components: {
        WsArt
    }
}

使用组件

在App.vue的<template></template>标签中使用组件，即：

<template>
  <div id="app">
    <WsArt></WsArt>
  </div>
</template>

导入+注册+使用 完整代码

<template>
  <div id="app">
    <WsArt></WsArt>
  </div>
</template>

<script>
import  WsArt  from  './components/WsArt.vue'

export default {
    name: 'App',
    components: {
        WsArt
    }
}
</script>

接下来，你就会看到页面会显示组件中的内容。

在这个示例中，我们首先创建了一个名为 WsArt.vue 的子组件。然后，在 App.vue 中，我们使用 import 语句导入了子组件，并在 components 选项中注册了它。最后，我们在父组件的模板中使用了子组件。  

希望这个更详细的步骤能帮助您更好地理解如何创建和注册 Vue 子组件。如果您有任何疑问，欢迎随时提出。