在一个方法中使用多个$

Question

请给我一些理论性更强的问题的建议。

我需要在项目中创建一些自定义元素。并为不同的变体添加样式和方法。

我有一个关于方法和$emit的问题。

例如，标签输入。

我可以通过$emit从组件中获取字段的值。

<input @change="changeInput" />
export default {
methods: {
changeInput() {
this.$emit('changeInput')
}
}
}

在这个阶段，出现了两个问题。

1. 如果我在同一方法中运行两个具有不同参数的$emit，但只使用其中一个，是否仍然会触发另一个并创建额外的负载?例如:

// Input component
<input @change="changeInput" />
export default {
methods: {
changeInput(event) {
this.$emit('changeInput', event)
this.$emit('changeInputValue', event.target.value)
}
}
}
//Parent component
<MyInput @changeInput="changeInput" />

2. 如果，例如，对于一个输入，我只使用一个$emit，但它的所有值，即使大多数地方只需要它的单个值。传递值的负载是否大于使用单个部件的负载?例如:

// Input component
<input @change="changeInput" />
export default {
methods: {
changeInput(event) {
this.$emit('changeInput', event)
}
}
}
//Parent component
<MyInput @changeInput="changeName" />
<MyInput @changeInput="changeEmail" />
<MyInput @changeInput="getInput" />
export default {
data: () => ({
name: '',
email: '',
input: {}
}),
methods: {
changeName(event) {
this.name = event.target.value
},
changeEmail(event) {
this.email = event.target.value
},
getInput(event) {
this.input = event
}
}
} 

一方面，整个对象总是被转移到这里，必要时可以随意使用。但是，如果在大多数情况下只使用这个输入标记的值，那么总是传递整个对象有意义吗?或者最好为所有条件设置几个$emit:

changeInput(event) {
this.$emit('changeInput', event)
this.$emit('changeInputTarget', event.target)
this.$emit('changeInputValue', event.target.value)
}

这里我只写了一个输入，但是如果它是一个具有大数据对象的组件呢?根据具体情况，它需要部分地或完全地通过$emit传递。在这种情况下，最好的处理方法是什么?

我使用了几个具有不同值的$emit，以及一个通用的$emit。从全局来看，这对性能没有影响。但是突然间，如果你增加组件的数量，你可能会遇到问题。我希望在任何项目中都能尽可能地保证性能。

Answer 1

两个发射都将执行，并导致额外的负载

有时很容易把$emit想象成return。但事实并非如此。它不会"结束"。组件，或者它所在的函数。执行，然后依次执行下一个$emit。

this.$emit('changeInput', event)
this.$emit('changeInputValue', event.target.value)

传递较大对象的负载不会明显大于

一些将不得不打开event到event.target.value。子组件或父组件。

如果你认为你将永远需要更大的

;对象，然后一致地传递较大的对象。

。不要发出两次$，只需这样做:

this.$emit('changeInput', event)