Home > Article > Web Front-end > Can props pass functions in vue?
Props in vue can pass functions; strings, arrays, numbers and objects can be passed as props in vue. Props are mainly used to pass values in components. The purpose is to receive data passed from the outside. The syntax is " export default {methods: {myFunction() {// ...}}};".
The operating environment of this tutorial: Windows 10 system, Vue3 version, Dell G3 computer.
A common question often asked by newbies in Vue. Strings, arrays, numbers, and objects can be passed as props
. But can you pass a function as a props
?
Although it is possible to pass a function as a props
, this is not good. On the contrary, Vue has a feature designed specifically to solve this problem, let's take a look next.
It is relatively simple to get a function or method and pass it as a prop to a child component. In fact, it works exactly the same way as passing any other variable:
<template> <ChildComponent :function="myFunction" /> </template> export default { methods: { myFunction() { // ... } } };
As said before, you should never do anything like this in Vue.
Why? Vue has something better.
If you have used React, you will be used to passing functions.
In React, we can pass a function from the parent component to the child component so that the child component can communicate upwards with the parent component. Props and data flow downward, function calls flow upward.
However, Vue has a different mechanism to implement child-to-parent communication, Vue uses events.
This is the same way the DOM works - Vue's way is more consistent with browsers than React. Elements can emit events and can listen to these events.
Therefore, although it is possible to pass functions as props in Vue, it is considered an anti-pattern.
Events are how we communicate with parent components in Vue.
Here is a short example to illustrate how events work.
First, we will create the subcomponent that emits an event when created:
// ChildComponent export default { created() { this.$emit('created'); } }
In the parent component, we listen for the event:
<template> <ChildComponent @created="handleCreate" /> </template> export default { methods: { handleCreate() { console.log('Child has been created.'); } } };
Event There is so much more that can be done, and this is just scratching the surface. It is highly recommended to check out the official Vue documentation to learn more about it, it is definitely worth reading.
But events cannot completely solve all our problems.
In many cases, the problem we are trying to solve is accessing data from different scopes.
The parent component has one scope, and the child component has another scope.
Usually, we want to access the value in the child component from the parent component, or access the value in the parent component from the child component. Vue prevents us from doing this directly, which is a good thing.
It makes our components more encapsulated and improves their reusability. This makes our code cleaner and avoids a lot of headaches in the long run.
But sometimes we may try to bypass this problem through functions.
「Get the value from the parent class」
If you want the child component to access the method of the parent component, then passing the method directly as a prop seems simple and clear.
In the parent component we will do this:
<!-- Parent --> <template> <ChildComponent :method="parentMethod" /> </template> // Parent export default { methods: { parentMethod() { // ... } } }
In our child component, use the passed in method:
// Child export default { props: { method: { type: Function }, }, mounted() { // Use the parent function directly here this.method(); } }
What are the problems with doing this?
This is not entirely wrong, but using events would be better in this case.
Then, when needed, the child component does not call the function, but just emits an event. The parent component will then receive the event, call the function, and the assembly will update the prop passed to the child component.
This is a better way to achieve the same effect.
In other cases, we may want to get a value from a child element into the parent element, and we use a function for this.
For example, you might be doing this. The parent function accepts the value of the child function and processes it:
<!-- Parent --> <template> <ChildComponent :method="parentMethod" /> </template> // Parent export default { methods: { parentMethod(valueFromChild) { // Do something with the value console.log('From the child:', valueFromChild); } } }
Call the incoming method in the child component and pass the value of the child component as a parameter of the method:
// Child export default { props: { method: { type: Function }, }, data() { return { value: 'I am the child.' }; }, mounted() { // Pass a value to the parent through the function this.method(this.value); } }
This It's not entirely wrong, it works.
It's just that this isn't the best way to do it in Vue. Instead, events are better suited to solving the problem. We can achieve the exact same thing using events
<!-- Parent --> <template> <ChildComponent @send-message="handleSendMessage" /> </template> // Parent export default { methods: { handleSendMessage(event, value) { // Our event handler gets the event, as well as any // arguments the child passes to the event console.log('From the child:', value); } } }
In child components we emit events:
// Child export default { props: { method: { type: Function }, }, data() { return { value: 'I am the child.' }; }, mounted() { // Instead of calling the method we emit an event this.$emit('send-message', this.value); } }
Events are very useful in Vue, but they also don't 100% solve our problem question. Sometimes, we need to access the child's scope from the parent in a different way.
For this, we use scoped slots!
Scope slots are a more advanced topic, but they are also very useful. In fact, I think they are one of the most powerful features Vue has to offer.
They weaken the boundary between child scope and parent scope. But it's done in a very clean way, making our components as composable as before.
If you want to know more about how scope slots work, you can read the official documentation first, or we will explain it next time.
[Related recommendations: "vue.js Tutorial"]
The above is the detailed content of Can props pass functions in vue?. For more information, please follow other related articles on the PHP Chinese website!