详解vue中组件的创建，并举例说明父组件调用子组件

在Vue中，组件是可复用的Vue实例。我们可以通过Vue.component()方法来创建组件。

组件的创建步骤如下：

1. 定义组件：我们可以通过Vue.component()方法来定义组件，该方法需要传递两个参数，第一个参数是组件名称，第二个参数是一个包含组件选项的对象。

2. 注册组件：通过Vue实例的components选项来注册组件，这样我们就可以在Vue实例中使用该组件。

3. 使用组件：在Vue实例中，我们可以通过组件名称来使用该组件，例如在模板中使用组件标签。

下面是一个例子，我们创建了一个名为"my-component"的组件，该组件渲染一个按钮，并在按钮点击时发出一个事件。

<template>
  <button @click="onClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit('button-click')
    }
  }
}
</script>

我们可以在父组件中通过使用组件标签的方式来调用子组件，并且可以监听子组件发出的事件：

<template>
  <div>
    <my-component @button-click="handleClick"></my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  },
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>

在上面的例子中，我们通过使用组件标签来调用子组件，并且监听子组件发出的"button-click"事件。当按钮被点击时，子组件会发出该事件，父组件会捕获该事件并执行handleClick方法。