建一个自己的网站价格中国美食网页设计模板
文章目录
- 问题：
- 解决方案：
问题：
正常封装element-plus的组件例如el-select，如果不处理下，会导致在具体页面使用时候，传递el-select原生属性和方法，在封装的组件内获取不到。
解决方案：
在封装组件时候，使用v-bind="$attrs" v-on="proxyEvents"接收属性和方法
<div>$attrs：{{ $attrs }}</div><el-select v-bind="$attrs" v-on="proxyEvents" style="width: 100%"><el-option v-for="item in list" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]" /></el-select>// 属性处理const attrs = useAttrs() // 获取绑定值就是attrs.modelValue// 事件代理const proxyEvents = computed(() => {const { on } = attrsreturn Object.keys(on || {}).reduce((acc: Record<string, any>, key) => {acc[key] = (...args: any[]) => (on as any)[key](...args)return acc}, {})})使用组件时候，就按照原生的el-select方式传递属性和方法即可
v-model：绑定值
v-model:otherVal ：其他绑定值
<MyScrollSelect@change="change"@focus="focus2"v-model="form.id"v-model:otherVal="form.name"placeholder="滚动加载或搜索-单选"clearablefilterable/>