请给我一些理论性更强的问题的建议。
我需要在项目中创建一些自定义元素。并为不同的变体添加样式和方法。
我有一个关于方法和$emit的问题。
例如,标签输入。
我可以通过$emit从组件中获取字段的值。
<input @change="changeInput" />
export default {
methods: {
changeInput() {
this.$emit('changeInput')
}
}
}
在这个阶段,出现了两个问题。
- 如果我在同一方法中运行两个具有不同参数的$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" />
- 如果,例如,对于一个输入,我只使用一个$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。从全局来看,这对性能没有影响。但是突然间,如果你增加组件的数量,你可能会遇到问题。我希望在任何项目中都能尽可能地保证性能。
两个发射都将执行,并导致额外的负载
有时很容易把$emit
想象成return
。但事实并非如此。它不会"结束"。组件,或者它所在的函数。执行,然后依次执行下一个$emit
。
this.$emit('changeInput', event)
this.$emit('changeInputValue', event.target.value)
传递较大对象的负载不会明显大于
一些将不得不打开event
到event.target.value
。子组件或父组件。
如果你认为你将永远需要更大的
;对象,然后一致地传递较大的对象。
。不要发出两次$,只需这样做:
this.$emit('changeInput', event)