Советы по использованию функциональных компонентов Vue

Vue.js

Что такое функциональный компонентОн не управляет никаким состоянием, он не прослушивает переданное ему состояние и не имеет методов жизненного цикла, это просто функция, которая принимает некоторые реквизиты. Проще говоря一个无状态和无实例的组件

Основное письмо:

Vue.component('my-component', {
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function(createElement, context) {
    // ...
  }
})

.vue однофайловая запись компонента

<template functional>
  ...
</template>

Поскольку функциональные компоненты неthis, параметр зависит отcontextДля прохождения объект со следующими полями:

  • props: предоставить всеpropОбъект
  • children:VNodeмассив дочерних узлов
  • slots: функция, которая возвращает объект, содержащий все слоты
  • scopedSlots: (2.6.0+) Объект, раскрывающий переданный слот с областью действия. Также предоставляет обычные слоты как функции.
  • data: передать весь объект данных компонента, какcreateElementВторой параметр входящего компонента
  • parent: ссылка на родительский компонент
  • listeners: (2.3.0+) Объект, содержащий все прослушиватели событий, зарегистрированные родительским компонентом для текущего компонента. Этоdata.onпсевдоним .
  • injections: (2.3.0+) Если используется опция вставки, этот объект содержит свойства, которые должны быть вставлены.

навыки и умения

Следующее резюме основано на использовании<template>Проблемы, возникающие при разработке функциональных компонентов с тегами

attr и использование слушателя

Обычно, когда мы разрабатываем компоненты, мы будем использовать свойства и события для передачи операций.v-bind="$attrs"а такжеv-on="$listeners". Способ написания функциональных компонентов отличается.attrsсвойства интегрированы вdataсередина.

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

привязка класса и стиля

При введении функциональных компонентов непосредственное связывание внешнего слояclassимя класса иstyleНедопустимый стиль.data.classУказывает на динамическую привязкуclass, data.staticClassэто означает, что привязка является статическойclass, data.staticStyleпривязан к встроенным стилям

TitleView.vue

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

Test.vue

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

введение компонента

Функциональные компоненты представляют другие компоненты следующими способами, для специальной справки: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>

$options вычисляемое свойство

иногда нужно модифицироватьpropисточник данных, использованиеVueкоторый предоставил$optionsсвойство, вы можете получить доступ к этому специальному методу.

<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>

Суммировать

Хотя скорость и производительность являются преимуществами функциональных компонентов, это не означает, что ими можно злоупотреблять, поэтому ее нужно выбирать и взвешивать в соответствии с реальной ситуацией. Например, в некоторых компонентах дисплея. Например,buttons,tags, cards, или если страница представляет собой статический текст, то функциональные компоненты хорошо подходят.

Категории