【一步步开发AI运动APP】十三、如何进行运动开始前的站位预检，提升用户体验

肥段殴盘二次封装组件需要考虑的3个重要的问题

1，props 如何进行传递

2，插槽如何穿透

3，暴露实例以及实例中的方法

在vue3中的$attrs的变化

vue3中$listeners已被删除合并到$attrs中。

vue3的$attrs现在包括class和style属性。

vue2中不包含class和style属性。

也就是说：当子组件写上 v-bind="$attrs"

父组件就可以使用子组件的内置事件和内置属性了。

下面我们会详细说一下$attrs

props 如何进行传递属性和事件

我们可以在子组件中使用 v-bind="$attrs"

这样可以把父组件中的属性传递给子组件了

// 子组件

// 父组件

01

01-1

如何解决写组件时没有属性提示的问题

我们发现一个问题：在父组件中的组件写相关属性时，没有属性提示。

// 子组件

这样父组件在使用的时候，就可以看到属性提示了。

插槽如何封装1: 通过 template 来封装插槽

// 父组件

02

暴露实例以及实例中的方法

我们可以通过 defineExpose 来暴露实例以及方法【常用的】

也可以通过vm.exposed来进行暴露实例以及方法

需要注意组件最初设置了v-if=false这种情况

// 子组件

// 父组件

03

04

另外一种暴露方式

常见的暴露方式

defineProps({

name:xxx,

age:xxx,

})

等价与下面这一种

vm.exposed= {

name:xxx,

age:xxx,

}

vue3 中的 props

props 是组件的自定义属性，用于从父组件向子组件传递数据。

props 不会包含继承的属性（如 class 和 style），除非显式声明。

vue3 中的 $attrs

vu3中$attrs: 包含了所有[传递]给[子组件]的非 props 属性。如：继承的属性（如 class 和 style）以及未在 props 中声明的属性。

vue3中的$attrs: 包含 style和class。$attrs包含着数据和事件。

vue3 $listeners已被删除合并到$attrs中。

在vue2中的$attrs

vu2中$attrs: 包含了所有[传递]给[子组件]的非 props 属性和style和class之外的属性。

vue2中的$attrs: 不包含 style和class

下面是详细的讲解：

在V ue2 中，attrs里面包含着上层组件传递的所有数据(除style和class)

当一个组件声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。

结合inheritAttrs:false，可以将传递下来的数据应用于其他元素，而不是根元素。

h函数封装上面的组件

有些的小伙伴说：我们是否可以使用h函数去封装上面的组件呢？

额度 不足，当前使用次数：2183 当前使用量 2001585 token, token上限:2000000