vue 父组件 子组件

在Vue.js中，父组件和子组件是通过组件化的特性相互关联的。父组件可以包含、引用或嵌套子组件，而子组件则可以像普通元素一样被插入到父组件的模板中。

**父组件调用子组件**：
在Vue中，你可以在父组件的HTML模板中声明并使用子组件。比如，假设有一个`FatherComponent`，它想显示一个名为`ChildComponent`的子组件，只需这样：

<template>
  <div>
    <h1>这是父组件</h1>
    <child-component></child-component> <!-- 这里引用了子组件 -->
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件文件

export default {
  components: { // 注册子组件
    ChildComponent
  }
};
</script>

在这个例子中，`<child-component>`标签就是对`ChildComponent`的实例化。

**子组件与父组件通信**：
子组件可以通过事件（`$emit`）将信息发送给父组件，而父组件可以通过`v-on`监听这些事件并作出响应。另外，也可以通过props将数据从父组件传给子组件。

<!-- 子组件中触发事件 -->
<button @click="$emit('custom-event', 'Hello from Child!')">点击我</button>

// 父组件中监听事件并处理
<child-component :message="parentMessage" @custom-event="handleCustomEvent"></child-component>

在这里，子组件的点击事件会触发`custom-event`，并将一个字符串传递给父组件，`handleCustomEvent`函数会在父组件内执行，并接收这个消息。