2.10组件间的通信

1.Vue组件的嵌套关系

1.1认识组件的嵌套

前面我们是将所有的逻辑放到一个 App.vue 中；

• 在之前的案例中，我们只是创建了一个组件 App；
• 如果我们一个应用程序所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；
• 所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；
• 再将这些组件组合嵌套在一起，最终形成我们的应用程序；

1.2组件关系之间的案例

2.父组件传递子组件

2.1组件嵌套和组件通信初认识

组件嵌套关系与通信必要性

一、组件嵌套关系

• App 组件是 Header、Main、Footer 组件的父组件；
• Main 组件是 Banner、ProductList 组件的父组件。

二、组件通信的场景（为何需要组件通信？）

Vue 项目开发中，组件间经常需要相互通信，常见场景包括：

1. 父组件向子组件传递数据：
   • 示例 1：App 组件若使用多个 Header，需向不同 Header 传递不同数据，以展示差异化内容；
   • 示例 2：Main 组件一次性请求到 Banner 数据和 ProductList 数据后，需将数据传递给 Banner 组件和 ProductList 组件。
2. 子组件向父组件传递事件 / 通知：
   当子组件内部发生特定事件（如点击操作、数据状态变化）时，需要通知父组件执行对应操作（如修改父组件数据、触发父组件方法）。

三、总结

组件间通信是 Vue 项目开发的核心环节之一，后续将具体学习组件之间传递数据的方法。

2.1父组件传递子组件---数组用法

2.2父组件传递子组件----对象用法

3.非props的attribute

• 什么是非 Prop 的 Attribute 呢？
  • 当我们传递给一个组件某个属性，但是该属性并没有定义对应的 props 或者 emits 时，就称之为 非 Prop 的 Attribute；
  • 常见的包括 class、style、id 属性等；
• Attribute 继承
  • 当组件有单个根节点时，非 Prop 的 Attribute 将自动添加到根节点的 Attribute 中：

00.禁用Attribute继承和多根节点

如果我们不希望组件的根元素继承 attribute，可以在组件中设置 inheritAttrs: false：

• 禁用 attribute 继承的常见情况是需要将 attribute 应用于根元素之外的其他元素；
• 我们可以通过 $attrs 来访问所有的非 props 的 attribute；

代码块：

html

<div>我是NotPropAttribute组件<h2 :class="$attrs.class"></h2>
</div>

多个根节点的 attribute

• 多个根节点的 attribute 如果没有显示的绑定，那么会报警告，我们必须手动的指定要绑定到哪一个属性上：

4.子组件传递父组件

• 什么情况下子组件需要传递内容到父组件呢？

  • 当子组件有一些事件发生的时候，比如在组件中发生了点击，父组件需要切换内容；
  • 子组件有一些内容想要传递给父组件的时候；

• 我们如何完成上面的操作呢？

  • 首先，我们需要在子组件中定义好在某些情况下触发的事件名称；
  • 其次，在父组件中以on-的方式传入要监听的事件名称，并且绑定到对应的方法中；
  • 最后，在子组件中发生某个事件的时候，根据事件名称触发对应的事件；

5.组件通信案例练习

6.自定义事件的参数和验证