时间戳

首页 > 解决方案 > 将未声明的道具传递给子组件（如 ...args）

vue.js - 将未声明的道具传递给子组件（如 ...args）

问题描述

我正在为 Vue 组件制作一个包装器组件。

例如，我想包装 Quasar q-input（假设因为我正在做一些自定义样式：

// q-input-wrapper.vue
<template>
  <q-input v-model="inputValue" label="Some Label">
</template>

但后来我希望q-input-wrapper能够接受所有q-input支持的道具。我不想在q-input-wrapper.vue.

有没有办法绑定传递给消费的q-input-wrapper道具q-input？

例子：

<q-input-wrapper color="blue" icon="mail" class="some-class" style="some-style: value" />

color,icon都是q-input道具，我不想明确地将它们声明为q-input-wrapper' 道具但仍想使用它们。

可能类似于如何...args工作？

标签： vue.jsquasar-framework

解决方案

您可以传递任何道具v-bind="$attrs"和任何听众v-on="$listeners"：

<template>
  <q-input v-model="inputValue" label="Some Label"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

演示

推荐阅读