千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

组件关系:只要被调用就是子组件,公共组件:提高代码复用.页面组件:提高代码可读性.(方便后期维护)

如何在组件中显示数据： 通过模板语法{{data中的键}}

如何在组件中使用事件： 通过事件语法@事件类型="函数名"

层级思想：只要被调用的组件 都属于当前页面的子组件（站在html结构上有父标签 子标签）。

封装思想：公共组件-增加代码复用性，逻辑/页面组件-增加代码可读性。

组件通信:不同父调用NavBar子组件所显示的内容不一样，父得传递数据给子 也就是组件通信

  props(父传子):是啥：组件内部的一个语法   作用：获取组件属性值

        props属性 =》会自动保存到模型中，然后视图通过 {{属性名}} 来获取显示数据

        调用: <组件名 属性名="值" 或 v-bind:属性名="data中的键"></组件名>

        定义:app.component(组件名, { // 核心目的获取属性数据 -> 自动注入到模型中 -> 调用

   props: [属性名, ..., 属性名],或

   props: {属性名: 类型, // 情况1：单类型 属性名: [类型,...,类型],  // 情况2：多类型 属性名: { // 情况3：对象既可以检查类型又可以验证还有默认数等type: String,required: true,//(必须要传，不传报错)default: 100,validator: function (value) {return bool}}},template: ``,data() {},methods: {},....})

   $emit(子传父): 通知（发送通知）：this.$emit("自定义事件名称", 数据,....,数据)

执行（监控通知）：@自定义事件名称="父处理函数"

单项数据流:单向数据流指在组件化思想，开发的项目中，数据由根或者父组件传递给子组件，禁止子组件中直接更改，而是由父更改后重新传递给子数据使用

组件通信其他方案:定义数据，父写provide: {数据名: 值}

使用数据子写（注：可以理解为同步模型 因此可以直接视图使用）

inject:['数据名', ...., '数据名']

组件通信:插槽slot:

默认: 步骤1：定义组件 通过<slot></slot>占位留一个口子/槽

步骤2：调用组件 留心:双标签中的内容 会自动填充到口子/槽 中

具名:步骤1：定义组件 通过<slot name="标识"></slot>占位留一个口子/槽

步骤2：调用组件 根据下述语法插入数据（留心1：如果标识不写则插入默认口子/槽 留心2：标识不能加引号

新：<template #标识>内容</template>

作用域:步骤1：定义组件 <slot name="标识" v-bind:任意名称="data模型中的键" ... ></slot> 传数据