edu-components-straddle

@vue/babel-plugin-jsx(Vue3.0)和@vue/babel-preset-jsx(Vue2.x)插槽的写法不同需要做兼容处理(HOC)

vue2.x中子组件获取的实例属性详解

1. $props: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问

2. $attrs: 除style, class之外未被组件props声明的属性对象

3. $listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

4. $slots: 用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容

5. $scopedSlots: 用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。

vue3.0中子组件获取实力例属性详解

1. $props: 当前组件接收到的 props 对象。组件实例代理了对其 props 对象 property 的访问。

2. $slots: { [name: string]: (...args: any[]) => Array

3. $attrs: 包含了父作用域中不作为组件 props 或自定义事件的 attribute 绑定和事件。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——这在创建高阶的组件时会非常有用。

迁移指南 – $attrs 包括 class 和 style 迁移指南 – 渲染函数 API 的更改 迁移指南 – 新增 Emits 选项 迁移指南 – 移除 .native 修饰符