常用的标准组件
props emit provide/inject
多级传递
element table中封装自适应列宽组件
背景：在动态加载table的列头和数据的时候，列头的宽度不会随内容的大小自适应变化，导致表格比较拥挤，列头的名称会换行，需要对elementui的 el-table-column 进行一个二次封装，使其拥有自适应列宽的功能
v-bind="$attrs" 的作用：
多级组件通信的另一种方式，除了使用vuex太重，跟上面的provide和inject不同，还可以使用
v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，实现props穿透
在 Vue 2 中除了 $attrs 外，还有 $listeners,一个是属性一个是事件，
在Vue 3 中把 $listeners 合并到 $attrs 里了。
useAttrs和useSlots的作用：
在setup中使用 slots 和 attrs 的情况应该是比较少的，因为可以在模板中通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数
ps:当前组件因为需要通过获取label算出宽度，所以需要使用useAttrs
el-table-column 的 min-width：
与width的区别如下：
所以设置自适应列宽组件的核心就是通过列名的长度赋值对应的min-width
使用二次封装的组件后效果图：
循环拖拽组件
背景：在拖拽式生成json文件的过程中，需要让首次拖拽后的的组件依然具备嵌套和拖拽的功能（类似于树结构的反复嵌套），就可以使用嵌套组件，去递归出想要的json配置
组件中通过引用自身，去形成嵌套组件,核心代码如下
注意事项
1：使用循环组件的时候，存在事件冒泡
解决方法：在定义事件的时候使用 @click.stop 取代@click
事件委托和事件冒泡
1.什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
2.事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。（事件委托）
3.阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止。
4.阻止默认行为 ：event.preventDefault()
阻止冒泡事件 ： event.stopPropagation()
5.事件委托：
事件委托：就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
事件委托的关系是将子元素的事件委托到父元素上。
2: 循环组件之间互相独立，存在类似闭包现象
循环组件中的变量都是存在于自己的独立空间，当有一个功能是当前id如果和dom的id一致则加深显示，会发现在切换点击对象时，之前的逻辑判断依然生效
解决方法： 因为该组件是循环调用，不能把组件看成一个整体，如果是嵌套关系则不会受到父组件的影响，上图可清晰看出，切换到嵌套组件里点击，之前的点击效果依然存在（每一个组件都是独立的，都有自己的curId，所以要通过vuex 设置curId 全局变量，页面用computed监听 成功解决
ps:为什么要使用computed而不是data获取vuex中的state
这是因为data 中的内容只会在 created 钩子触发前初始化一次，具体来说就是data中设置count: this.$store.state.count则count的值是created钩子执行前this.$store.state.count的值，赋值之后属性的值就是纯粹的字面量，之后this.$store.state.count 如何变化均影响不到count的取值。而 computed 则是通过依赖追踪实现的，计算属性在它的相关依赖发生改变时会重新求值。
3：在嵌套组件的传值给最外层
在嵌套组件内部的嵌套组件上 写@params="$emit('params',$event)"
在最外层的组件上写@params="paramsFunc"
简单来说，为了实现内层的子传父功能，使用了@params="$emit('params',$event)"，
在内层执行@params="$emit('params',$event)"时候，其实就是执行父组件的@params="$emit('params',$event)"，然后又会执行爷爷组件的 @params="$emit('params',$event)"，最终执行的是src/App.vue 的 nodeClick 事件
总结
通过循环组件 实现多元素在一个容器下的拖拽
实现了利用Vue中递归组件的力量来渲染嵌套数据。 我们看到，我们可以通过创建一个在自己的模板中引用自己的组件来做到这一点。这种递归方法在渲染那些看似不同但结构相同的数据实体时特别有用,当然也更有难度一些
