十进十建 网站建设工作总结重庆网站seo推广公司

背景：
封装一个使用功能相同使用频率较高的input公共组件作为子组件，大多数长度要求为200，且实时显示统计子数，部分input有输入提示。

代码实现如下：

<template><el-input v-model="inputValue" type="textarea" :maxlength="maxlength" :placeholder="placeholder" autosize show-word-limit  @input="handleInput"></el-input>
</template><script setup lang="ts">
const inputValue = ref('')
interface Props {placeholder: string;maxlength: number;
}
withDefaults(defineProps<Props>(), {placeholder: '',maxlength: 200,autosize: true,showWordLimit: true,
});const emit = defineEmits(['update:modelValue']);
const handleInput = () => {emit('update:modelValue', inputValue.value);
};
</script>

上面代码实现，console控制台就会有warn：

所有可传可不传的属性，我们都要给加上?,console控制台就没有warn信息。

interface Props {placeholder?: string;maxlength?: number;
}