This articleGitHub /qq44924588... It has been included on the above, and more categories of previous highly praised articles have also been compiled. I have also compiled a lot of my documents and tutorial materials. Welcome to Star and perfection. You can refer to the test points for review during interviews. I hope we have something together.
A common question for beginners to ask. Strings, arrays, numbers, and objects can be used aspropstransfer. But you can treat a function as apropsCome and pass it?
Although functions can be used aspropsPassing, but this method is not good. Instead, Vue has a feature designed specifically to solve this problem, and let's take a look.
Passing functions to the component
It is relatively simple to get a function or method and pass it as a prop to a child component. In fact, it's exactly the same way as passing any other variable:
<template>
<ChildComponent :function="myFunction" />
</template>
export default {
methods: {
myFunction() {
// ...
}
}
};
As mentioned earlier, never do such a thing in Vue.
Why? Vue has something better.
Everyone said that there is no project to write a resume, so I found a project for everyone, and also included a gift [Construction tutorial】。
React vs Vue
If you have used React, you will get used to transferring 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 downwards, and function calls flow upwards.
However, Vue has a different mechanism to implement child-to-parent communication methods, Vue uses events.
This works the same way as DOM - Vue's approach is more consistent with the browser compared to React. Elements can emit events and can listen for them.
Therefore, although functions can be passed as props in Vue, it is considered an anti-pattern.
Usage Events
Events are how we communicate with the parent component in Vue.
Here is a short example of how events work.
First, we will create a child component 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() {
('Child has been created.');
}
}
};
There are many more things that events can do, and that's just the skin. Highly recommended to viewOfficial Vue documentationCome and learn more about it, it is definitely worth reading.
But events don't completely solve all our problems.
Accessing data in the scope of the parent component from the child component
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.
Typically, we want to access the values in the child component from the parent component, or from the child component to the parent 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 more concise and avoids many headaches in the long run.
But sometimes we may try to bypass this problem by function.
Get value from parent class
If you want the child component to access the parent component's methods, then passing the method directly as a prop seems simple and straightforward.
In the parent component we will do this:
<!-- Parent -->
<template>
<ChildComponent :method="parentMethod" />
</template>
// Parent
export default {
methods: {
parentMethod() {
// ...
}
}
}
In our child components, use the incoming method:
What will be wrong with doing this?
This is not entirely wrong, but it would be better to use events 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 assemble the prop that will update to the child component.
This is a better way to achieve the same effect.
In other cases, we might want to get a value from the child element into the parent element, and we used the function for this.
For example, you might be doing this. The parent function takes 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
('From the child:', valueFromChild);
}
}
}
Call the passed method in the child component and pass the value of the child component as a parameter to 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 is not entirely wrong, and it is feasible to do so.
It's just that this is not the best way to go in Vue. On the contrary, events are more suitable for solving this problem. We can use events to achieve the exact same thing
<!-- 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
('From the child:', value);
}
}
}
In the child component, we issue an event:
// 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', );
}
}
Events are very useful in Vue, but they also don't solve our problem 100%. Sometimes, we need to access the scope of the child from the parent in different ways.
To do this, we use scope slots!
Use scope 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 offers.
They weaken the boundary between the child scope and the parent scope. But it is done in a very clean way, making our components as combinable as before.
If you want to know more about how scoped slots work, you can check out the official documentation first, or we will explain it next time.
The possible bugs that may exist after the code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time to debug the log. Here I would like to recommend a useful bug monitoring tool Fundebug to you.
source:/que...
Summarize
This is the article about how to pass functions as props to components in Vue. This is the end of this article. For more related contents to pass vue props to components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!