vue.js普通组件的注册-局部注册

在Vue.js中，我们可以使用全局注册或局部注册的方式来注册组件。

全局注册是将组件注册到Vue实例上，可以在整个应用程序中使用。局部注册是将组件注册到一个父组件中，只能在该父组件及其子组件中使用。

在局部注册组件时，我们需要在父组件中使用components选项来注册子组件。具体的步骤如下：

1. 创建一个普通组件，例如ChildComponent.vue：

<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Child Component!'
    }
  }
}
</script>

<style scoped>
h2 {
  color: blue;
}
</style>

1. 在父组件中使用components选项来注册子组件，例如ParentComponent.vue：

<template>
  <div>
    <h1>Parent Component</h1>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    'child-component': ChildComponent
  }
}
</script>

在上面的代码中，我们首先导入了ChildComponent.vue文件，然后在components选项中注册子组件。注意，子组件在模板中使用的名称是child-component，而不是组件文件的名称。这是因为在Vue.js中，组件的名称需要使用短横线命名法，并且在模板中需要使用kebab-case。

1. 在应用程序的根组件中使用ParentComponent组件，例如App.vue：

<template>
  <div id="app">
    <parent-component></parent-component>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue'

export default {
  components: {
    'parent-component': ParentComponent
  }
}
</script>

在上面的代码中，我们在根组件中使用了ParentComponent组件。

通过上述步骤，我们就完成了一个简单的局部注册组件的过程。在应用程序中，只有ParentComponent组件及其子组件才能使用ChildComponent组件。

需要注意的是，局部注册的组件只能在其父组件及其子组件中使用，而不能在其他组件中使用。如果需要在多个组件中使用同一个子组件，可以考虑使用全局注册。