Интерфейс Vue: функциональные компоненты

Vue.js

Изучайте знание Vue каждый день

Особенности функционального компонента:

  • никакое состояние не управляется
  • Не прослушивание переданного ему состояния
  • нет методов жизненного цикла
  • Это просто функция, которая получает некоторые реквизиты

Отмечаем как функциональные такие компоненты:

  • нет статуса==Нет данных ответа
  • нет экземпляра==нет этого контекста

Преимущества функциональных компонентов:

  • Низкие накладные расходы на рендеринг, потому что функциональные компоненты — это просто функции;

Базовое написание функциональных компонентов:

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

Все, что вам нужно, передается через параметр Context, который представляет собой объект, содержащий следующее поле:

  • реквизит: объект, предоставляющий все реквизиты
  • Children: массив дочерних узлов VNode
  • слоты: функция, которая возвращает объект, содержащий все слоты
  • scoptedSlots: (2.6.0) Объект, отображающий переданные слоты с областью видимости, а также обычные слоты как функцию.
  • данные: передать весь компонент компонентаобъект данных, переданный в компонент как второй параметр createElement
  • parent: ссылка на родительский компонент
  • listeners:(2.3.0+) Объект прослушивателя событий, который содержит: все родительские компоненты являются предками текущего компонента, который является псевдонимом data.on
  • инъекции: (2.3.0+) Если используется опция инъекции, объект содержит: свойства, которые должны быть внедрены;

Сценарий использования 1: Компоненты-оболочки

  • Вместо этого программно выберите один из нескольких компонентов для рендеринга;

  • Манипулировать дочерними элементами, реквизитами, данными перед передачей их дочерним компонентам; Вот пример компонента смарт-списка, который отображает более конкретные компоненты от имени переданного значения реквизита:

      var EmptyList = { /* ... */ }
  
  var TableList = { /* ... */ }
  
  var OrderedList = { /* ... */ }
  
  var UnorderedList = { /* ... */ }

  Vue.component('smart-list', {
    functional: true,
    props: {
      items: {
        type: Array,
        required: true
      },
      isOrdered: Boolean
    },
    render: function (createElement, context) {
      function appropriateListComponent () {
        var items = context.props.items
  
        if (items.length === 0)           return EmptyList
        if (typeof items[0] === 'object') return TableList
        if (context.props.isOrdered)      return OrderedList
  
        return UnorderedList
      }
  
      return createElement(
        appropriateListComponent(),
        context.data,
        context.children
      )
    }
  })

Сравнение slots() и дочерних элементов

анализировать:

Это очевидно из буквального значения:

  1. детей, вы можете получить все дочерние узлы текущего узла компонента;

  2. Функция slots() возвращает все объекты слотов; Пример:

     <my-functional-component>
   <p v-slot:foo>
     first
   </p>
   <p>second</p>
 </my-functional-component>

Для приведенного выше примера компонента:

  • дети дадут вам два тега абзаца;
  • slots().default будет передавать только второй анонимный тег абзаца
  • slots().foo передаст первый именованный тег абзаца

Суммировать:

  • Вы можете использовать slots(), чтобы компоненты знали о механизме слотов, или просто передавать дочерние элементы другим компонентам для обработки.

Обратитесь на официальный сайт

Категории