vue,发射vs传递函数作为道具

Question

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

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

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

2. 在父项中定义处理程序并将其作为props传递给按钮组件.

我习惯在React中做后者.对于这种情况,是否有最佳做法？

Answer 1

Vue哲学是道具,事件起来.第一个选项是在事件本身向父节点发出(向上)然后进行处理时更接近.

同样在Vue SFC中,您还可以使用v-on(或@)为绑定属性添加前缀,该v-on(或@)将其意图描述为事件向上而不是v-bind(或:),这意味着它是一个支柱,即使它真的是对事件的回调.

Answer 2

作为从 React 迁移过来的新手视角，我不知道为什么@event会存在（或者像上面的答案一样 - 作为标准）。我不能声明哪个events组件会$emit？，但我可以很容易地看出哪些props是流传下来的。通过一个好的命名，我将能够知道哪个实际上是回调事件。

Answer 3

最佳实践

最佳做法是选择编号1。您可以在官方文档中看到该做法：https : //vuejs.org/v2/guide/components.html#Sending-Messages-to-Parents-with-Events

性能

只要在使用事件总线时传递对要执行的功能的引用或作为道具传递时，几乎就不会看到性能差异。

使用选项编号1的示例

您可以this.$emit('eventName', dataToSend, ...)用来将数据发送到父组件，然后再像这样监听父组件<my-component @eventName="yourHandler" />。然后，您将能够对每个按钮使用不同的逻辑。

我为实现此功能的多选组件创建了一个提琴：https : //jsfiddle.net/wkdL0xbc/

// HTML
<div id="app">
  <multi-choice :items="myItems" @selected="alert($event)"></multi-choice>
  <multi-choice :items="myItems" @selected="sayIsCool"></multi-choice>
</div>

// JavaScript
const multiChoice = {
    template: '<div class="multi-choice"><span v-for="item in items" @click="select(item)">{{ item }}</span></div>',
  props: ['items'],
  methods: {
    select(item) {
        this.$emit('selected', item);
    }
  }
};

new Vue({
  el: "#app",
  data() {
    return {
        myItems: [
        'Homer',
        'Marge',
        'Bart'
      ],
    }
  },
  components: {
    multiChoice: multiChoice
  },
  methods: {
    sayIsCool(item) {
        alert(item + ' is cool!')
    }
  }
})

Answer 4

我仍在学习Vue.js，如果有不一致之处，我将很高兴在这里进行任何更改。

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

大事记

优点

• 对于库：减轻负担，客户端在方法使用方面更具灵活性
• 有用的Vue devtools事件记录
• 允许使用全局侦听器（this.$root.on），尽管Vuex.js可以更好地增强它。
• 差异化语法：:用于道具和@事件/方法

缺点

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

道具

优点

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

缺点

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

结论

看起来这些方法比其他方法更具惯例和个人偏爱，尽管我认为，如果不是Vue.js文档优先考虑事件方法，那么每个人都会很乐意仅使用道具，我认为这样更好。

道具可以完成事件的所有工作，除了少数情况（例如$root事件侦听模式-注意Vuex.js取代了此功能，并且是可伸缩性的首选），优点是它们更加显式，可调试且易于检查。

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