vue-cli父子组件写法

在 Vue.js 中，我们可以通过组合不同的组件来构建更复杂的应用程序。父子组件的关系是其中一种最基本的组件关系。

下面是一个简单的父子组件写法示例：

父组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <child-component :message="message"></child-component>
  </div>
</template>

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

export default {
  components: {
    'child-component': ChildComponent
  },
  data() {
    return {
      title: '父组件标题',
      message: 'Hello, child component!'
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在上面的示例中，父组件包含一个 `ChildComponent`，并传递了一个名为 `message` 的 prop。`ChildComponent` 接收 `message` prop 并在模板中显示它。

注意，在父组件中获取到子组件的方式是使用 `v-bind` 指令将父组件的数据传递给子组件。在子组件中，可以通过 `props` 属性接收这些数据。

希望这个示例能够帮助你理解 Vue.js 中的父子组件关系。