vue3 + antdesignvue（element同理）完美封装Input无需定义繁琐api（开箱即用）

Kimser

已于 2023-04-20 16:25:15 修改

阅读量345

点赞数

文章标签： javascript 前端开发语言

于 2023-04-20 16:24:51 首次发布

本文链接：https://blog.csdn.net/Kimser/article/details/130269573

版权

该文章探讨了在Vue.js中如何使用v-model和插槽进行父页面到子页面的数据通信。示例展示了如何在Cinput组件中通过v-model绑定父页面的modalValue，并在插槽中定义前缀模板。子页面通过v-bind接收父页面属性，并利用$attrs和$slots动态绑定插槽内容，简化API交互。在mounted生命周期钩子中，使用ref访问子组件的方法和属性。

摘要由CSDN通过智能技术生成

//父页面
<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)
  }
}