vue如何通过$attrs覆盖已经定义的要给孙组件的props?

站长

2024年06月30日 09:15 · 阅读数 7

题目描述

vue版本：2.x

使用elementui的el-popover组件二次封装了popover组件，如何通过$attrs来覆盖子组件默认写好的props值呢？

相关代码

父组件(placement设置为top)：

<cus-popover placement="top"></cus-popover>

子组件(placement已默认设置为bottom)

<el-popover placement="bottom" popper-class="cus-drop-down" v-bind="$attrs">
    菜单列表内容
    <div slot="reference">
      <slot>
        请选择
      </slot>
    </div>
  </el-popover>
...

1个回答

test

2024-06-30

<template>
  <el-popover v-bind="mergedAttrs" popper-class="cus-drop-down">
    菜单列表内容
    <div slot="reference">
      <slot>
        请选择
      </slot>
    </div>
  </el-popover>
</template>

<script>
export default {
  computed: {
    mergedAttrs() {
      const defaultAttrs = {
        placement: 'bottom',
        // 其他默认属性...
      };
      return { ...defaultAttrs, ...this.$attrs };
    },
  },
};
</script>

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容