Understanding functional components in Vue.js

A functional component in Vue is a component that takes a rendering context and returns rendered HTML. It has no instances. To create functional components, you must use the functional: true attribute and the rendering function to create the object

Functional components allow you to create simple components in a concise way by passing context, making them very simple and very popular. What I will share next in the article are the functional components in Vue.js, which have certain reference value and I hope it will be helpful to everyone.

【Recommended course: Vue.js Tutorial】

What is a functional component

A functional component can be seen as a component-related function, that is, it is a component that takes a rendering context and returns rendered HTML. It has no instance, so there is no this.

Create a functional component

To create a functional component, you must create an object using the functional: true attribute and the rendering function. An example of a FunctionalButton component will be created in the following example:

export default {
  functional: true,
  render(createElement, context) {
    return createElement('button', 'Click me');
  }};

Rendering Context

contextThe parameter seen on the render function is called the rendering context. It is an object containing the following properties:

props: the object that provides props

children: the array of VNode child nodes

slots: the function returns the slot object

parent: A reference to the parent component

listeners: An object containing the v-on listeners registered on the component. This is just an alias pointing to data.on.

injections: If the inject option is used, the object contains properties that should be injected.

data: object containing all previous properties

Trigger event

Since the functional component has no instance, the event listener comes from the context.listeners property parent, so the following code can be used to implement the click event

Example: Suppose there is an App.vue component, where FunctionalButton.js can be imported to use it in its template

<template>
  <FunctionalButton>
    Click me
  </FunctionalButton></template>

export default {
  functional: true,
  render(createElement, { props, listeners, children }) {
    return createElement(
      'button',
      {
        attrs: props,
        on: {
          click: listeners.click
        }
      },
      children
    );
  }};

Summary : The above is the entire content of this article, I hope it will be helpful to everyone.

The above is the detailed content of Understanding functional components in Vue.js. For more information, please follow other related articles on the PHP Chinese website!