Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you what the concept of vue functional components is related to knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.

A vue functional component is a component that does not contain states and instances; it does not support responsiveness and cannot be referenced by the this keyword to define scenarios that have no response data and do not require any lifecycle, and only accept some props to display the component.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What is the functional component of vue

Vue provides a type of component called functional components, which is used to define scenarios where there is no response data and no lifecycle is required. It only accepts some props to display components.

A function component (not to be confused with Vue's render function) is a component that does not contain states and instances.

Simply put, components do not support responsiveness and cannot reference themselves through the this keyword.

Access component properties

Slots: a function that returns a slots object

Without a state or instance, you may wonder how to reference data or methods. Vue provides a context parameter object for the underlying render function.

The context parameter object has the following properties:

Props: all props objects

Children: an array of VNode child nodes

ScopedSlots: (vue2.6.0+) exposes objects passed into the scope slot. Expose the ordinary slot as a function

Data: all data objects, passed to the component as the second parameter of the createElement function

Parent: reference to the parent component

Listeners: (vue2.3.0+) an object that contains the event listener registered by the parent. It is also an alias for data.on

Injections: (v2.3.0 +) if the inject option is used, the object contains the properties that should be injected

Accessing this context parameter is very simple. For example, if we want to use props, we can do this:

Access the context of a component in Template

Access the context of a component in the render function

These are all the contents of the article "what is the concept of vue functional components?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.