Functional components are popular in the React community, so how do we use them in Vue

The following topics are covered: higher-order functions, states, instances, VUE components

What is a functional component

We can think of a functional component as a function within the component, taking the render Context as an input parameter and returning the rendered HTML

For functional components, we can define them as follows:

  • Stateless: The component itself is Stateless
  • Instanceless: The component has no instance of itself, i.e., no this

Because of these two properties of a functional component, we can use it as a high-order component, which is a component that generates other components. It’s like the Japanese high-precision mother machine.

A full Demo of the following example

Create a functional component

Functional: true plus render function is the simplest functional component, show your code, and create a functional component called functionbutton.js

export default {
    name: 'functional-button'.functional: true,
    render(createElement, context) {
        return createElement('button'.'click me')}}Copy the code

As mentioned above, functional components do not have this, so the argument is passed by context. Let’s see what properties context has

Render context
  • props
  • children
  • slots (a slots object)
  • parent
  • listeners
  • injections
  • data

And the one at the topdataContains references to other attributes, nibility. This is used in the examples below

Now create an app.vue to introduce the above functional components

<template>
    <FunctionalButton>
        click me
    </FunctionButton>
</template>
Copy the code

The click me property above is the childern property of functionButton. js. We can modify the component to app.vue to define the component’s button

export default {
    name: 'funtional-button'.functional: true,
    render(createElement, { children }) {
        return createElement('button', children)
    }
}
Copy the code

See, this is the ES6 argument deconstruction, using {children} instead of context

An event definition

Functional components have no instances, and events can only be passed by the parent component. Let’s define a simple click event on app.vue

<template>
  <FunctionalButton @click="log">
    Click me
  </FunctionalButton>
</template>
Copy the code

The corresponding FunctionalButton. Js

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

The event attribute in createElement is on. See vUE’s official documentation for details

Simple way to write it

The Api designed by The University of Utah is very human, and there are so many props and listeners to deliver, so we integrated this attribute into data, so we can rewrite it again

export default {
  functional: true,
  render(createElement, { data, children }) {
    return createElement( 'button', data, children ); }};Copy the code

Yeah, doesn’t it feel a lot cleaner

This is a complete high order component, the following small show the charm of high order.

createElement('button', data, ['hello'. children])Copy the code

Well, it’s very easy to DIY a button with hello

The end

The above is the basic definition and basic use of functional components, I hope to help you learn.

Make an advertisement

The company is now urgently looking for front-end development, the coordinates of Shenzhen Nanshan, interested can see here, directly send my resume email. [email protected]