关于Vue自定义组件封装的属性/事件/插槽的透传问题

html 复制代码
// parent.vue
<Myinput
  v-model="keyWords"
  placeholder="请输入内容"
  size="small"
  @input="input"
  @change="change"
  width="320"
>
  <template #prepend>
    <el-select v-model="select" placeholder="请选择" style="width: 115px">
      <el-option label="Restaurant" value="1" />
      <el-option label="Order No." value="2" />
      <el-option label="Tel" value="3" />
    </el-select>
  </template>
  <template #append>
    <el-button @click="handleQuery">查询</el-button>
  </template>
</Myinput>

// child.vue
  <el-input
    v-bind="$attrs"
    class="e-input"
    :style="inputStyle"
    v-on="$listeners"
    @input="$emit('input', $event)"
    @change="$emit('change', $event)"
  >
    <template v-for="(_, slotName) in $slots" #[slotName]>
      <slot :name="slotName"></slot>
    </template>
  </el-input>
复制代码
内部属性: $attrs、$listeners、$slots

一、属性的透传

v-bind="$attrs": 只会读取子组件【props 选项】中没有申明过的属性

二、自定义事件的透传

方式一:

v-on="$listeners": 会将父组件所有事件监听器传递到子组件内部元素

html 复制代码
<el-input 
    v-bind="$attrs" 
    class="e-input" 
    :style="inputStyle" 
    v-on="$listeners">
</el-input>

方式二: 直接在子组件上触发事件

html 复制代码
<el-input
  v-bind="$attrs"
  class="e-input"
  :style="inputStyle"
  @input="$emit('input', $event)"
  @change="$emit('change', $event)"
>
</el-input>

方式三: 手动触发事件

js 复制代码
export default {
  props: ["value"],
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    handleChange(e) {
      this.$emit("change", e.target.value);
    },
  },
};

三、插槽的透传

"$slots": 获取所有父组件传递的插槽(默认、具名、作用域)

html 复制代码
<template v-for="(_, slotName) in $slots" #[slotName]>
  <slot :name="slotName"></slot>
</template>

四、获取子组件实例

js 复制代码
// parent.vue
<Myinput ref="elInp" />
  mounted() {
    // 输入框聚焦
    this.$refs.elInp.setFocus();
  },
html 复制代码
//child.vue
    <el-input
      ref="inputRef"
      v-bind="$attrs"
      class="e-input"
      :style="inputStyle"
      v-on="$listeners"
    />
    
methods: {
    setFocus() {
      this.$refs.inputRef.focus();
    },
},

el-input 二次封装示例

相关推荐
用户516816614584116 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦16 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He16 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ21 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊21 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化