1.Vue组件的嵌套关系

1.1认识组件的嵌套

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

1.2组件关系之间的案例

2.父组件传递子组件

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

组件嵌套关系与通信必要性
一、组件嵌套关系
App 组件是 Header、Main、Footer 组件的父组件；
Main 组件是 Banner、ProductList 组件的父组件。
二、组件通信的场景（为何需要组件通信？）
Vue 项目开发中，组件间经常需要相互通信，常见场景包括：
父组件向子组件传递数据：
示例 1：App 组件若使用多个 Header，需向不同 Header 传递不同数据，以展示差异化内容；
示例 2：Main 组件一次性请求到 Banner 数据和 ProductList 数据后，需将数据传递给 Banner 组件和 ProductList 组件。
子组件向父组件传递事件 / 通知：
当子组件内部发生特定事件（如点击操作、数据状态变化）时，需要通知父组件执行对应操作（如修改父组件数据、触发父组件方法）。
三、总结
组件间通信是 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-的方式传入要监听的事件名称，并且绑定到对应的方法中；
最后，在子组件中发生某个事件的时候，根据事件名称触发对应的事件；