创建一个组件并再父组件中调用

好的，让我们来创建一个简单的组件并在父组件中调用它。我们将创建一个名为 "HelloWorld" 的组件，它将显示一个简单的问候语。

首先，在你的项目中创建一个名为 "HelloWorld.vue" 的文件。在文件中添加以下代码：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

这是一个简单的模板，它将在页面上显示一个标题 "Hello World!"。接下来，我们将添加一些样式，让它看起来更好。

<template>
  <div class="hello-world">
    <h1>Hello World!</h1>
  </div>
</template>

<style>
.hello-world {
  background-color: #eee;
  padding: 20px;
  text-align: center;
}
</style>

现在，我们已经为我们的组件添加了一些样式，让它看起来更好。最后一步是将组件添加到我们的父组件中。

在父组件的模板中添加以下代码：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

我们只需要在父组件中添加 `<HelloWorld />` 标签，就可以在页面上显示我们的 "HelloWorld" 组件了。

完整的代码如下所示：

HelloWorld.vue

<template>
  <div class="hello-world">
    <h1>Hello World!</h1>
  </div>
</template>

<style>
.hello-world {
  background-color: #eee;
  padding: 20px;
  text-align: center;
}
</style>

Parent.vue

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue';

export default {
  components: {
    HelloWorld,
  },
};
</script>

注意，我们需要在父组件的 `<script>` 标签中导入 "HelloWorld" 组件，并将其添加到 `components` 对象中，以便可以在模板中使用它。

现在，当你浏览父组件时，将会看到 "Hello World!" 的问候语显示在页面上。