Vue3中h函数封装组件，$attrs与props有何本质区别？
摘要：二次封装组件需要考虑的3个重要的问题 1，props 如何进行传递 2，插槽如何穿透 3，暴露实例以及实例中的方法 在vue3中的$attrs的变化 vue3中$listeners已被删除合并到$attrs中。 vue3的$attrs现在包
二次封装组件需要考虑的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"
这样可以把父组件中的属性传递给子组件了
// 子组件
<template>
<div>
<!-- v-bind="$attrs" 可以接收到父组件中的属性设置 -->
<el-input v-bind="$attrs"></el-input>
</div>
</template>
// 父组件
<template>
<div>
<MyInput class="set-width" placeholder="请输入名称" clearable v-model="name" @blur="clearHandler"></MyInput>
</div>
</template>
<script setup lang="ts">
import MyInput from '@/components/MyInput.vue'
import { ref } from 'vue';
let name = ref('')
const clearHandler = () => {
console.log('失去焦点啦')
name.value += 'copy'
}
</script>
<style lang="scss" scoped>
.set-width {
margin: 100px;
width: 300px;
}
</style>
如何解决写组件时没有属性提示的问题
我们发现一个问题：在父组件中的组件写相关属性时，没有属性提示。
// 子组件
<template>
<div>
<!-- v-bind="props" 现在我们的属性肯定是 element-plus 的内置属性了 -->
<el-input v-bind="props"></el-input>
</div>
</template>
<script setup lang="ts">
// 引入 input 的所有属性
import { type InputProps} from 'element-plus'
// 定义 props， Partial将必填属性变成可选属性
const props = defineProps<Partial<InputProps>>()
</script>
这样父组件在使用的时候，就可以看到属性提示了。