将事件和道具传递给根元素或从根元素传递

Question

我正在尝试创建一个可重复使用的按钮。有没有办法将道具和事件传递给按钮本身，而不必考虑所有不同的可能性？

例如，如果我在<new-button>组件上设置了一个类型，它会将类型传递给<button>而不必向<new-button>组件添加'type'道具？事件也是如此，点击事件可以从按钮本身触发吗？

组件模板本身非常简单，按钮是根组件：

<template>
    <button :disabled="submitting">
        <i class="fa fa-spinner fa-spin" v-show="submitting"></i>
        <i v-if="icon" :class="icon" v-show="!submitting"></i>
        <slot></slot>
    </button>
</template>

我知道class属性通过了，但我没有看到任何通过其他任何方式的方法。

Answer 1

如何传递所有道具

如果你想将所有道具传递给一个元素而不必特别指定每个道具，那么实现它的方法是传递$props对象（包含传递给组件的所有道具）使用v-bind。

父：

<custom-button :prop1="alice" :prop2="has" :prop3="a" :prop4="cat">

子：

<button v-bind="$props">

export default { 
  props: ['prop1', 'prop2', 'prop3', 'prop4'] 
}

如何防止声明所有道具

如您所见，我们仍然必须在组件的props选项中声明所有道具。幸运的是，有一个解决方法。让我们传递一个道具对象：

父：

<custom-button :props="{ prop1, prop2, prop3, prop4 }">

子：

<button v-bind="props">

export default {
  props: ['props']
}

如何收听原生事件

最后，对于发布事件，您可以注册native Javascript events的侦听器，例如click或input，这些侦听器来自HTML元素。

父：

<custom-button @click.native="doStuff">

子：

<button>