//父页面
<Cinput v-model="modalValue">
// 插槽举例
<template #prefix>
<user-outlined type="user" />
</template>
</Cinput>
//子页面
<template>
<div class="my-input">
// v-bind绑定父级传递属性诸如 placeholder...
<a-input ref="CInput" v-bind="$attrs">
// 动态绑定插槽无需定义诸多api
<template v-for="(value, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData || {}" />
</template>
</a-input>
</div>
</template>
<script>
export default {
data() {
return {
modalValue: ''
}
},
mounted() {
// 创建ref
const entries = Object.entries(this.$refs.CInput)
for (const [key, value] of entries) {
this[key] = value
}
// $slots插槽内容
console.log(entries, this.$slots)
}
}