vue.js - 何时使用v-bind传递函数与v-on+emit在Vue中的选择？

Question

vue中通过v-bind也可以传递函数，但是我看大部分使用都是v-on去传递事件，然后子组件通过emit触发父组件的函数。

为什么v-bind传递函数这么少见呢？v-bind传递函数都能被v-on + emit 替代吗？或者它们有什么优劣势？

Answer 1

主要是面向的场景不一样。

使用 v-bind 传递的函数的方式，适合在子组件内部处理的一些业务逻辑。
比如说 EleUI 的 el-upload 组件。我们在期望自己实现上传函数的时候，就会使用 http-request 属性传递一个上传函数给子组件，子组件内部去调用我们提供的上传函数。如果没有那么它会使用自己内部的默认实现使用传递下来的 action 属性来发起上传。

而 v-on + $emit 的实现，更多的场景是业务是在上级组件的，比如说刚刚提到的 el-upload 组件图片上传完成之后，我们会希望同步修改绑定的 fileList 变量。它会抛出一个 on-change/on-sucess 这样的事件让我们去处理数据（而不是直接修改绑定的 fileList 变量）。像类似这样业务的我们就会在父级组件来实现，而不是在子组件内实现。

Answer 2

因为规范吧，就像我们声明对象都是let a = {}，不会let a = function(){}，即使function同样可以绑定属性。v-on是事件，v-bind传递的是属性，v-on不会强制父组件有这个事件，有就触发，没有拉倒，v-bind需要在props中声明，可能还会有require和type的限制，需要在父子组件中都约定好，如果都是你自己开发，那你明白这个约束，如果是多人协作，别人可能会讲：这写的什么。所以回到前面，还是规范吧

Answer 3

在Vue中，v-bind和v-on/$emit用于不同的目的，因此它们的使用场景也有所不同。

v-bind

v-bind主要用于属性绑定，包括数据、计算属性、方法或函数等。你可以使用v-bind将一个函数从父组件传递到子组件，然后在子组件内部调用这个函数。

例如：

<template>  <child-component :my-function="parentFunction"></child-component></template><script>export default {  methods: {    parentFunction() {      console.log('Function from parent component');    }  }}</script>

在这个例子中，parentFunction方法被绑定到子组件的myFunction属性上。然后，子组件可以在其内部通过this.myFunction()来调用这个方法。

v-on/$emit

另一方面，v-on主要用于监听DOM事件，如点击、输入等，并在触发这些事件时执行一些操作。在组件通信中，v-on通常与$emit一起使用，以允许子组件向父组件发送事件。

例如：

<template>  <child-component @child-event="parentFunction"></child-component></template><script>export default {  methods: {    parentFunction() {      console.log('Function from parent component called by child event');    }  }}</script>

在这个例子中，子组件通过$emit('child-event')触发一个事件，父组件通过v-on监听这个事件，并在事件触发时执行parentFunction方法。

选择何时使用

选择使用v-bind传递函数还是v-on/$emit进行通信，主要取决于你的具体需求：

• 如果你希望子组件能够在不受父组件控制的情况下主动调用父组件的函数（例如，进行某种计算或更新），那么使用v-bind传递函数可能是一个好选择。
• 如果你希望子组件能够在某些事件发生时通知父组件，并允许父组件对这些事件做出响应，那么使用v-on/$emit进行通信可能更合适。

优劣势

• 使用v-bind传递函数的优势在于它允许子组件更灵活地调用父组件的函数。然而，这也可能导致子组件对父组件的依赖过强，降低了组件的独立性。
• 使用v-on/$emit进行通信的优势在于它允许组件之间进行解耦的通信，父组件和子组件都可以独立地触发和响应事件。然而，这也可能导致事件的数量增加，使组件间的通信变得更加复杂。

总之，在选择使用v-bind传递函数还是v-on/$emit进行通信时，你需要根据你的具体需求和项目的复杂性来做出决策。