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

使用$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>

Answer 2

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

Answer 3

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