组件基础，父子组件基础助力Vue组件式开发 ##

2023-11-17 23:11:13

Vue.js 组件式开发：打造模块化、可重用且可交互的 UI

在 Vue.js 的世界中，组件是构建交互式和可重用用户界面的基石。通过将界面划分为独立的部分，组件使代码更加井然有序且易于维护，就像玩乐高积木一样。

1. 认识组件

一个组件由 HTML 模板和 JavaScript 逻辑组成。HTML 模板定义了组件的外观，而 JavaScript 逻辑则控制它的行为。你可以创建自定义组件，也可以使用 Vue.js 提供的内置组件库。

<template>
  <div>
    <h1>这是组件标题</h1>
    <p>这是组件内容</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

2. 构建父子组件关系

就像真实的家庭关系一样，Vue.js 中的组件也有父子关系。父组件包含子组件，并通过 "props" 向子组件传递数据。子组件通过 "emit" 方法向父组件发送事件。

<!-- 父组件 -->
<template>
  <div>
    <my-component :message="message"></my-component>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: ['message']
}
</script>

3. 让组件对话：组件通信

组件通信是组件之间交换数据和事件的一种方式。除了 props 和 emit，Vue.js 还提供了 "插槽"，允许父组件向子组件注入自定义内容。

4. 插槽：组件之间的内容传递

插槽是组件模板中预留的特殊位置，允许父组件向子组件传递内容。通过 slot 标签或 v-slot 指令来定义插槽。

<!-- 父组件 -->
<template>
  <div>
    <my-component>
      <template v-slot:header>
        <h1>这是插槽标题</h1>
      </template>
      <template v-slot:content>
        <p>这是插槽内容</p>
      </template>
    </my-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>