关于vue使用$attrs

• Z时代
• 2024-02-27
• 分类：IT

<template>
  <el-table
      v-bind="$attrs"
      v-on="$listeners"
      stripe
      border
      @row-click="rowClick">
    <el-table-column
        prop="date"
        label="日期"
       >
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
       >
    </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"
    @row-click="rowClick">
</base-table>

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

回答：

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

以上是 关于vue使用$attrs 的全部内容， 来源链接： utcz.com/p/936465.html