Простая реализация компонентов функции Switch в Vue3

Vue.js

what

В языках программирования, помимо использования оператора if для вынесения условных суждений, есть еще один часто используемый переключатель.

В vue официальный помог нам реализовать инструкцию v-if, но переключателя пока нет, можем ли мы реализовать его сами?

Эта статья предназначена для изучения этой проблемы и, наконец, реализации компонента Switch.

начать с конца

Давайте начнем с того, как мы хотим, чтобы пользователи использовали Switch.

Сравните это с js:

Пользователи могут применять функции коммутатора через компонент VSwitch.

Определить условия соответствия в зависимости от случая

Затем каждое условие соответствия случая представлено шаблоном

Таким образом, мы предусмотрели, как пользователи должны его использовать, а остальное фактически реализовано.

Идея этого шага состоит в том, чтобы определить спецификацию компонента, что также можно назвать определением интерфейса использования компонента.

how

Так как же нам этого достичь?

Давайте подумаем о функции Switch

Функция сплит-переключателя

Отображается шаблон, равный значению case, больше ничего не должно отображаться

Возьмите каштан:

когда случай = "сяохун"

тогда может отображаться только слот с именем «xiaohong»

Если регистр не соответствует и есть слот по умолчанию, отобразить слот по умолчанию

Конечно, у коммутатора есть и более сложные функции, начнем с самых основных функций и постепенно усложняем (итеративное мышление).

Принцип реализации

Прежде всего, мы должны сначала узнать слоты компонента, какие из них есть

В vue3 нам нужно легко получить слоты следующими способами:

setup(props,{slots}){
  console.log(slots)
}

Если вы напечатаете слоты, вы обнаружите, что можете получить объект, значение ключа — это имя слота, а значение — это функция, вы можете получить соответствующий vnode, вызвав эту функцию.

Например, что мне делать, если я хочу отобразить слот xiaohei?

просто нужно это

  setup(props, { slots }) {
    
    return () => {
      return slots.xiaohei()
    };
  },

Помимо возврата объекта в виде данных, экспортированных в шаблон, программа установки также может напрямую возвращать функцию в виде рендеринга.

Пока функция рендеринга возвращает соответствующий vnode, он в конечном итоге будет отображаться в представлении.

Таким образом, в соответствии с приведенным выше кодом содержимое внутри слота xiaohei в конечном итоге будет отображаться.

После понимания вышеизложенных пунктов знаний давайте вернемся и посмотрим на первую функцию.

Это до тех пор, пока мы отображаем слоты, соответствующие случаю?

Посмотрите на код:

export default {
  props: ["case"],
  setup(props, { slots }) {
    console.log(slots);
    return () => {
      if (slots[props.case]) {
        return slots[props.case]();
      }
    };
  },
};

Примечание О, и обязательно добавьте условное, потому что, скорее всего, нет соответствующего слота

Посмотрите, после понимания принципа, очень легко реализовать первую функцию.

Это просто, когда мы смотрим на вторую функцию?

Просто добавьте кусок кода:

export default {
  props: ["case"],
  setup(props, { slots }) {
    console.log(slots);
    return () => {
      if (slots[props.case]) {
        return slots[props.case]();
      }

      if (slots["default"]) {
        return slots["default"]();
      }
    };
  },
};

Если нет совпадения в первом условии, оно обязательно достигнет второго решения условия, то естьif (slots["default"])

Затем, если есть слот по умолчанию, просто верните

До сих пор вы реализовали простой функциональный компонент Switch.

Суммировать

Подведем итог тому, что вы узнали

  • При разработке компонента сначала разработайте правила (интерфейс) компонента
  • Идея постановки задач, разбивая большие функции на маленькие, а затем разбивая их одну за другой
  • Как получить слоты в vue3
  • setup может возвращать не только объект, но и функцию, эффект такой же, как и у функции рендеринга
  • vnode, возвращаемый функцией рендеринга, в конечном итоге будет отображаться в представлении.

Если вы научитесь, пожалуйста, используйте свои маленькие ручкипоставить лайкпеть~~~

полный код

// VSwitch.vue
<script>
export default {
  props: ["case"],
  setup(props, { slots }) {
    return () => {
      if (slots[props.case]) {
        return slots[props.case]();
      }

      if (slots["default"]) {
        return slots["default"]();
      }
    };
  },
};
</script>

Расширение мышления

На самом деле функция переключения, реализованная здесь, не завершена.Что, если совпадение пользователя соответствует нескольким условиям? Разрыва нет, так что должны ли мы отображать все совпавшие шаблоны?

Попробуй сам?

Категории