Function Objects in JavaScript#
Pay attention to the distinction between funcName() and funcName.
When we define a function
function addOne(num){
return num++
}
Then addOne(1) is equivalent to executing the function once.
While addOne represents the function object itself. For example,
let tempFunc = addOne // tempFunc is also a function, equivalent to addOne
let tempResult = addOne(5) // tempResult is 6
When our function has no parameters, these two cases are even more difficult to distinguish.
function printHello(){
console.log("Hello")
}
// ---------
printHello() // 1 execute the function and print Hello
let great = printHello // great is equivalent to printHello
great() // equivalent to 1
This difference is crucial in web event handling. For example (Vue)
<script setup>
function handleMyEvent(){
console.log("hello")
}
</script>
<template>
<!-- Assuming there is a custom component here, emitting the event myEvent -->
<myComponent @myEvent="handleMyEvent"></myComponent>
<myComponent @myEvent="handleMyEvent()"></myComponent>
<myComponent @myEvent="console.log('hello')"
</template>
In the above code, the first component binds the event to a callback function, while the second component executes the function body (prints hello) after the event is triggered, which is equivalent to the third component.
And the event thrown by our component can have parameters. When throwing an event with parameters, only the first type of writing can correctly receive the parameters. In this case, you only need to receive the parameters when defining the handleMyEvent(id) function.
Here are several ways to distinguish
<script setup>
const id = ref(1)
const name = ref("David")
function handleEvent(id, name){
console.log(id + ' ' + name)
}
</script>
<template>
<!-- In the child component defineEmits(['myEvent', id, name']) -->
<myComponent @myEvent="handleEvent"></myComponent> <!--✅-->
<myComponent @myEvent="handleEvent(id,name)"></myComponent> <!-- ❌ -->
<myComponent :id="id" :name="name" @myEvent="handleEvent(id,name)"></myComponen>
<myComponent :id="id" :name="name" @myEvent="handleEvent"></myComponen>
</template>
Although the third way of writing can work normally, when the event is triggered, its parameters are not passed out from the component internally, but the id and name in the current layer component are directly used as parameters to execute the function body.
The fourth way of writing receives the parameters passed out from the child component.
Summary#
When passing data between parent and child components, be careful not to pass redundant data. Although the fourth way of writing can work, if the information is already available in the child component, the third way of writing is more optimal.
Vue Listeners#
⚠️ When listening to component properties, you need to pass the getter instead of directly using props.name.
<script setup>
const props = defineProps(['id','name'])
watch(()=>props.id, function(newValue, oldValue){
// ...
})
</script>