向/从根元素传递事件和道具

Question

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

例如，如果我在<new-button> 组件上设置了一个类型，它会将该类型传递给<button>，而无需我向<new-button> 组件添加一个“类型”属性？事件也一样，点击事件可以从按钮本身触发吗？

组件模板本身相当简单，按钮是根组件：

<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对象（包含传递给组件的所有道具） 987654322@。

父母：

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

孩子：

<button v-bind="$props">

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

如何防止声明所有的 props

如您所见，我们仍然需要在组件的props 选项中声明所有道具。幸运的是，有一个解决方法。让我们传递一个 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>