What is a functional component? It doesn’t manage any state, it doesn’t listen for any state passed to it, it doesn’t have a lifecycle method, it’s just a function that accepts some prop. Simply put, it is a stateless and instance-free component

Basic writing:

Vue.component('my-component', {
  functional: true.// Props is optional
  props: {
    // ...
  },
  // To make up for missing instances
  // Provide the second argument as context
  render: function(createElement, context) {
    // ...}})Copy the code

. Vue single file component writing

<template functional>.</template>
Copy the code

Since functional components don’t have this, the argument is passed by context, which has the following fields:

  • props: All providedpropThe object of
  • children:VNodeAn array of child nodes
  • slots: a function that returns an object containing all slots
  • scopedSlots(2.6.0+) an object that exposes the incoming scope slot. Normal slots are also exposed as functions.
  • data: The entire data object passed to the component, ascreateElementThe second parameter is passed to the component
  • parent: a reference to the parent component
  • listeners(2.3.0+) An object containing all event listeners registered by the parent component for the current component. This is adata.onAn alias for “.
  • injections(2.3.0+) If the Inject option is used, the object contains property that should be injected.

Use skills

The following summaries are based on the problems encountered in developing functional components using the

Attr is used with the listener

We use v-bind=”$attrs” and V-on =”$listeners” for prop properties and events. Functional components are written differently, with the attrs attribute integrated into data.

<template functional>
  <div v-bind="data.attrs" v-on="listeners">
    <h1>{{ props.title }}</h1>
  </div>
</template>
Copy the code

Class is bound to style

Class names and style styles that are directly bound to the outer layer of the imported functional component are not valid. Data. class represents a dynamically bound class, data.staticClass represents a staticClass, and data.staticStyle represents an inline style

TitleView.vue

<template functional>
  <div :class="[data.class, data.staticClass]" :style="data.staticStyle">
    <h1>{{ props.title }}</h1>
  </div>
</template>
Copy the code

Test.vue

<template>
  <title-view
    :class="{title-active: isActive}"
    style="{ color: red }"
    title="Hello Do"
  />
</template>
Copy the code

Component introduction

For details about how to introduce functional components to other components, see github.com/vuejs/vue/i…

<template functional>
  <div class="tv-button-cell">
    <component :is="injections.components.TvButton" type="info" />
    {{ props.title }}
    </component>
  </div>
</template>

<script>
import TvButton from '.. /TvButton'

export default {
  inject: {
    components: {
      default: {
        TvButton
      }
    }
  }
}
</script>
Copy the code

$options computes attributes

Sometimes you need to modify the prop data source to access this particular method using the $options property provided by Vue.

<template functional>
  <div v-bind="data.attrs" v-on="listeners">
    <h1>{{ $options.upadteName(props.title) }}</h1>
  </div>
</template>

<script>
  export default {
    updateName(val) {
      return 'hello' + val
    }
  }
</script>
Copy the code

conclusion

While speed and performance aspects are advantages of functional components, they do not mean they can be abused, so they need to be selected and trade-offs based on the actual situation. For example, in some presentation components. For example, buttons, tags, cards, or pages that are static text are good for functional components.