vue3使用h函数如何封装组件和$attrs和props的区别

二次封装组件需要考虑的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"
这样可以把父组件中的属性传递给子组件了

1. // 子组件
2. <template>
3.   
4.    
5.     <el-input v-bind="$attrs"></el-input>
6.   
7. </template>

复制代码

1. // 父组件
2. <template>
3.   
4.     <MyInput  placeholder="请输入名称" clearable v-model="name" @blur="clearHandler"></MyInput>
5.   
6. </template>

复制代码

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

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

1. // 子组件
2. <template>
3.   
4.    
5.     <el-input v-bind="$attrs"></el-input>
6.   
7. </template>

复制代码

这样父组件在使用的时候，就可以看到属性提示了。
插槽如何封装1: 通过 template 来封装插槽

1. <template>
2.   
3.     <el-input v-bind="props">
4.       
5.       <template v-for="(_, slotName) in $slots" #[slotName]>
6.         <slot :name="slotName"></slot>
7.       </template>
8.     </el-input>
9.   
10. </template>

复制代码

1. // 父组件
2. <template>
3.   
4.     <MyInput  placeholder="请输入名称" clearable v-model="name" @blur="clearHandler"></MyInput>
5.   
6. </template><template>
7.   
8.     <el-input v-bind="props">
9.       
10.       <template v-for="(_, slotName) in $slots" #[slotName]>
11.         <slot :name="slotName"></slot>
12.       </template>
13.     </el-input>
14.   
15. </template>                              .com      

复制代码

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

我们可以通过 defineExpose 来暴露实例以及方法【常用的】
也可以通过vm.exposed来进行暴露实例以及方法
需要注意组件最初设置了v-if=false这种情况

1. // 子组件
2. <template>
3.   
4.    
5.     <el-input v-bind="$attrs"></el-input>
6.   
7. </template>

复制代码

1. // 父组件
2. <template>
3.   
4.     <MyInput  placeholder="请输入名称" clearable v-model="name" @blur="clearHandler"></MyInput>
5.   
6. </template><template>
7.   
8.     <el-input v-bind="props">
9.       
10.       <template v-for="(_, slotName) in $slots" #[slotName]>
11.         <slot :name="slotName"></slot>
12.       </template>
13.     </el-input>
14.   
15. </template>                              .com        清空值  

复制代码

另外一种暴露方式

1. 常见的暴露方式
2. defineProps({
3.   name:xxx,
4.   age:xxx,
5. })
6. 等价与下面这一种
7. vm.exposed= {
8.   name:xxx,
9.   age:xxx,
10. }

复制代码

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函数去封装上面的组件呢？
[code][/code]

                                                                                                                               

                                                微信                                                                                                本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
                        如果文中有什么错误，欢迎指出。以免更多的人被误导。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！