目录
组件的拆分
组件间通信（父子）
父子组件之间的通信很重要
路径提示插件（方便）
父传子（props）
2022.12.11回顾：
仔细再想想这个不是什么父传子，应该理解为父组件调用方法（子组件），那么在使用子组件时写的参数就是实参(注意在写实参的时候需要加：，因为是动态绑定)，子组件里面props定义的不就是形参，这么简单的Java里的调用方法的一个原理用在了这里而已。
对象用法（常用）
可以对传入内容进行限制
小细节
如果是对象类型，则默认值必须写成函数，返回这个对象！
实际使用时注意在父组件调用时要加冒号（：）在传入的参数上
props官方解释
在官方文档中可以看到无论是什么类型的props都必须要在传入时加：，来表示这是一个动态的参数， 因为这是一个 JavaScript 表达式而不是一个字符串。
在chatgpt中也给出了非常好的回答
实际的使用中出现了问题，实际使用的时候必须要加"",哪怕是数组也不可以少，并且还要加：不然就会显示不出来
不加：
加：
使用 v-bind 或缩写 : 来进行动态绑定的 props：
单向数据流
非prop的定义的属性（了解 很少用）
官网叫：透传 Attributes
就是没有定义props形参，但是也会传递过去
子传父（事件）
事件-vue官网
整体的逻辑就是子组件里面点击了，把需要做的处理传递到父组件进行操作（包括需要的参数）
注意子传父的三个步骤
先在子组件中emits里面声明一下
@传入事件名=“在父组件中绑定的方法名”
$开头的都是vue默认提供给我们的方法
this.$emit事件
在子组件哪里要先注册emits，然后用this.$emit(“事件名”，传出参数)，把事件传出去。
在子组件的方法（）里不需要加上参数，在 emit（）里写上要传出的参数即可
但是，在父组件的方法（）里要写上传入的参数
在父组件，在调用子组件的那里，使用@进行事件的绑定，承接子组件传递的事件
@子组件传递的事件名=“在父组件中承接的事件名”。然后在methods中对承接的事件进行处理.
这里的事件名可以一致，你要明白它本质的意义。
特别注意，虽然子组件中传递了参数，但在这里绑定事件时却不用带参数，只需要写事件名即可，否则无法显示，但在父组件的methods中方法还是要带上传递的参数的。
在这里父组件的方法（）里就是要写上参数
自定义事件的验证
多加一个emits来进行注册，这样有两个好处
1.别人在看代码的时候一下就知道我们这个组件有这些传递给父组件响应的事件名，知道是干嘛的
2.vscode在我们写代码的时候就会提示我们这些参数，相当于注册之后它就知道这个用在哪里了
对事件做一个验证，用的很少，主要是对参数有问题会在控制台报warning
通信案例练习
第一次尝试，一塌糊涂，连注册组件都忘了，我真的会谢！
还是先看看老师的代码然后模仿吧
我现在觉得需要自己重新写一遍购物车的案例再来写这个，真的忘了太多。
自己手写一遍，然后总结。
一个报错
‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
遇到这个大概率是你一开始的时候没有npm install，没有安装应该安装的node_module，也就是相关的依赖，这些依赖都在package.json里面，所以在启动脚手架项目之前，最好都先npm install一下，先把依赖下载一下再运行。
特别注意启动前都要检查一下，看看node_module是否存在，如果没有是启动不起来的，因为该下载的依赖没有下载
以后启动前都要npm install
不行的话重启再来。
写项目一定要梳理好思路再上手
先梳理一下逻辑，然后写好各个结构再上手。
首先是准备好根组件APP.vue,然后准备需要使用的组件TabControl.vue，并进行注册（局部组件），之后才可以使用，然后编写局部组件的内容，由根组件进行调用。
局部组件TabConttol主要负责实现导航栏，不能写死，需要由根组件传入参数来进行动态展示，所以要用v-for和props，采用flex布局
注意写的顺序，先写html，把框架搭好，然后写css，最后再进行vue.js的修改
改造：
第一步，原有html变成动态的v-for模板，根据传入的参数来进行显示，用到props
第二步：加点击事件，这一步写的也很不容易，里面也有很多语法忘记了
对这个class进行动态绑定，这个应该很熟悉的，第一次还没写出来，当active后面的判断为真时，class等于active，当你符合条件是给你绑定class，不符合条件时不绑定。
{}是对象语法，里面的active是布尔类型。
遇到问题千万不要着急，有时候真的可能不是你的错，就是浏览器出问题了，不要一直卡着。