vue 再封装的组件如何便捷传递props?

例如el-select 有很多props: value, disabled, filterable, name….

我要封装这个el-select, 要怎么做才能直接传递prop给这个el-select

// my-select.vue

<template>
  <el-select></el-select>
</template>
<script>
export default {
  name: 'my-select'
  props: {
   // 我要怎么做才能传参给这个el-select
   // 难道我要把它每个参数都写一遍?
  }

}
</script>

回答:

这样写

<template>
  <el-select v-bind="$props"></el-select>
</template>
<script>
import { Select } from 'element-ui'
export default {
  name: 'my-select'
  props: {
    ...Select.props, // 这里继承内在组件的props
    myProps: String,
  }

}
</script>

参考文章 – Vue.js实用技巧(二)

回答:

https://cn.vuejs.org/v2/api/#…

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注