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

Question

题目描述

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>
...

Answer 1

<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>

Answer 2

为什么不考虑在子组件把placement作为props呢？因为还要声明下props？

Answer 3

使用$props可以透传和覆盖Popover所有的属性值

<template>
  <el-popover v-bind="$props">
    <!-- .... -->
  </el-popover>
</template>
<script>
import { Popover } from 'element-ui'
export default {
  // 接收Popover所有的属性，然后用$props进行传递
  props: { ...Popover.props }
  // .....
}
</script>