关于vue使用$attrs

Question

<template>
  <el-table
      v-bind="$attrs"
      v-on="$listeners"
      stripe
      border
      @row-click="rowClick">
    <el-table-column
        prop="date"
        label="日期"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="address"
        label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    name: "BaseTable",
    components: {},
    inheritAttrs: false,
    data() {
      return {};
    },
    computed: {},
    watch: {},
    methods: {
      rowClick(){
        console.log(123)
      }
    },
    created() {

    },
    mounted() {

    },
  }
</script>

<style scoped>

</style>

以上是我定义组件,当我在父级这样去使用时

<base-table
    :data="tableData"
    :border="false"
    height="500"
    @row-click="rowClick">
</base-table>

对应的border=false并不生效，只有在我把子组件的border删除了才能父级传的才能生效，请问不在props添加border添加的情况下，怎么让子组件默认有border,而且父组件可以修改这个值。。

Answer 1

在子组件的prop中定义这个属性，并给一个默认值，在组件中使用定义的这个属性