本文以el-input
组件为例,其它组件类似用法。
一、解决数据绑定问题
封装组件的第一步,要解决的就是数据绑定的问题,由于prop数据流是单向传递的,数据只能从父流向子,子想改父只能通过提交emit
事件通知父修改。
父:
import { ref } from 'vue'
import CInput from '@/components/CInput/index.vue'
const name = ref<string>('')
<c-input v-model:value="name"/>
子组件:
import { ref, computed } from 'vue';
const props = withDefaults(defineProps<{
value: string;
}>(), {
value: ''
})
const inputValue = computed({
get: () => props.value,
set: (value: string) => emit('update:value', value)
})
<el-input
v-model="inputValue"
></el-input>
以上即可实现父子之前数据的双向传递。
但在Vue3.4+版本中,新增了defineModel()
,这个宏可以用来声明一个双向绑定 prop,通过父组件的 v-model 来使用:const model = defineModel()
。同样实现了父子组件数据的双向绑定。感兴趣的同学可以看下官网解释,其有更多用法。
二、属性、事件监听
在vue3版本中,“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。
例如el-input
组件上有许多属性,clearable、show-word-limit、show-password、@input、@focus等等,这些肯定不需要通过props传递给子组件,那就是通过$attrs
来进行传递。
在子组件封装时,编写:
<el-input
v-model="inputValue"
v-bind="$attrs"
>
</el-input>
当然对于你二次封装的组件,根据你的业务需要,直接固定一些属性。
这样,在父组件中,我们可以像使用el-input
组件一样,使用我们自己的组件传递属性和监听事件。
<c-input ref="nameRef" class="name-input" v-model:value="addForm.name" @input="handleInput" clearable/>
三、插槽传递
对于ElementPlus中的组件,通常都会都一些插槽,那我们封装后想保留这些插槽的使用,该如何写?Vue3为我们提供了$slots
,里面存着父组件所传入插槽的对象。所以我们可以这样写:
<el-input
ref="input"
class="c-input"
v-model="inputValue"
:placeholder="props.label"
v-bind="$attrs"
>
<template v-for="(_, name) in $slots" v-slot:[name]>
<slot :name="name"></slot>
</template>
</el-input>
这样,在父组件中我们可以正常使用el-input
中所带有的插槽:
<c-input v-model:value="loginForm.account" :label="$t('input.username')" clearable>
<template #prefix>
<el-icon><User /></el-icon>
</template>
</c-input>
四、原组件方法获取并暴露
最后一步,在父组件中想通过绑定ref调用el-input
的方法,该如何写?首先父组件直接调用肯定是不行的,因为封装的组件中并没有这些方法,这些方法是挂在封装的el-input
的实例对象上的。所以,解决办法就是我们通过在子组件中获取到这些方法,然后通过defineExpose
向父组件暴露就行了。
子组件:
import { ref, onMounted, defineExpose } from 'vue';
import type { InputInstance } from 'element-plus';
const input = ref<InputInstance>()
const inputMethods = ref({})
onMounted(() => {
const refMethods = Object.entries(input.value).filter(([_, value]) => value instanceof Function)
refMethods.forEach(([key, value]) => {
inputMethods.value[key] = value
})
})
defineExpose(inputMethods.value)
<el-input
ref="input"
class="c-input"
v-model="inputValue"
:placeholder="props.label"
v-bind="$attrs"
>
<template v-for="(_, name) in $slots" v-slot:[name]>
<slot :name="name"></slot>
</template>
</el-input>
这样,父组件中获取该组件的实例对象上就会存在这些方法了。完美解决!