vue，发射与传递函数作为道具

Question

假设我有一个导入到其他几个组件中的按钮组件。我希望子组件不与单击按钮时发生的任何一种逻辑耦合。所以我想在利用此按钮组件的各种组件中保留该逻辑。

我认为至少有两种方法可以解决这个问题。

1. 让孩子向父母发出事件，然后让父母定义处理程序。

2. 在父级中定义处理程序并将其作为道具传递给按钮组件。

我习惯在 React 中做后者。对于这种情况，vue 中有最佳实践吗？

原文由 Andrew Kim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue 的哲学是道具向下，事件向上。第一个选项紧随其后，因为事件本身被发出（向上）到父级然后被处理。

此外，在 Vue SFC 中，您还有一个额外的好处，即在绑定属性前加上 v-on（或 @）前缀，将其意图描述为向上移动的事件，而不是 v-bind（或 :)，这意味着它是一个道具，即使它实际上是对事件的回调。

原文由 Shelton Clinard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Vue.js 事件 是回调，它们不是 DOM 事件。您可以验证这一点，因为您将自定义名称添加到事件侦听器而不是 DOM 事件名称（ click ， focus …），并且没有 event 传递给函数的对象，除非您在 $emit 调用中指定 $event 参数。

事件

优点

• 对于图书馆：保持更轻便，客户可以更灵活地使用方法
• 有用的 Vue devtools 事件日志记录
• 允许全局监听器（ this.$root.on ），尽管 Vuex.js 可以更好地增强这一点。
• 差异化语法： : 道具和 @ 事件/方法

缺点

• 不太明确，更难调试（如果没有侦听器或事件名称拼写错误，则静默失败）

道具

优点

• 更明确，是声明性的，可以默认，需要，验证，使它们更容易调试（TypeScript 中的运行时错误或编译错误）

缺点

• 必须包括道具验证，这样你就不必在调用它之前检查 function() 道具是否存在（但无论如何使用道具验证是一个好习惯……）

结论

看起来这些方法比其他任何方法都更符合惯例和个人偏好，尽管我认为如果不是 Vue.js 文档优先考虑 事件 方法，每个人都会很乐意只使用 道具， 我认为这更好（更清晰） 。

Props 可以做 事件 做的所有事情，除了少数情况（比如 $root 事件监听模式——注意 Vuex.js 取代了这个特性并且是可扩展性的首选），它们的优点是更明确、可调试和检查-易于。

总结自： https ://forum.vuejs.org/t/events-vs-callback-props/11451

原文由 jpenna 发布，翻译遵循 CC BY-SA 4.0 许可协议