时间戳

首页 > 解决方案 > 向/从根元素传递事件和道具

vue.js - 向/从根元素传递事件和道具

问题描述

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

例如，如果我在<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>

我确实知道类属性通过，但我看不到任何通过其他任何东西的方式。

标签： vue.jsvue-component

解决方案

如何传递所有道具

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

家长：

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

孩子：

<button v-bind="$props">

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

如何防止声明所有道具

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

家长：

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

孩子：

<button v-bind="props">

export default {
  props: ['props']
}

如何收听本地事件

最后，对于发出事件，您可以为原生 Javascript 事件注册侦听器，例如HTML 元素click中input的气泡。

家长：

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

孩子：

<button>

推荐阅读