Vue и рекурсивные компоненты

JavaScript Vue.js

Автор: Милош Протич

Переводчик: Front-end Xiaozhi

Источник: vuejsdevelopers

Чем больше вы знаете, тем больше вы не знаете

Ставьте лайк и смотрите снова, формируйте привычку


эта статьяГитхаб:GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

Введение

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

Теоретически рекурсия — это поведение, требующее двух свойств:

  • конечная точка: case для остановки рекурсии
  • список правил: отвечает за сведение всех операций к конечной точке

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

Рекурсия и компоненты Vue

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

Когда полезны рекурсивные компоненты? Рекурсию можно использовать всякий раз, когда нам нужно использовать ту же структуру шаблона, но с иерархическими входными данными. Если древовидное представление (используемое для отображения структуры папок), комментарии на веб-сайте, такие компоненты, как вложенные меню и т.

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

Сцены

Представьте, что мы, как обычно, приходим на работу, делаем себе чашку кофе и начинаем читать любимый блог. Внезапно пришел наш начальник и сказал, что нужно реализовать новую страницу, на которой отображались бы все папки, подпапки и файлы, а количество файловых структур было неопределенным. может отображаться10индивидуальный,5или100папки. Далее мы выпили кофе и начали ломать голову, как решить эту проблему. В конце концов, мы подумаем об использовании рекурсивного обхода для достижения этой цели.

Минимальное количество компонентов для решения этой задачи равно1, но в нашем примере мы создаем два компонента:

  • rootкомпоненты
  • folderкомпоненты

Конечно, давайте сначала получим некоторые данные для использования:

данные

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

const root = {
  text: 'Root Folder',
  leaf: false,
  expanded: true,
  children: [{
    text: 'Sub Folder 1',
    leaf: false,
    expanded: false,
    children: [{
      text: 'Sub Sub Folder 1',
      leaf: false,
      expanded: false,
      children: [{
        text: 'SomeFile1.js',
        leaf: true
      }]
    }, {
      text: 'Sub Sub Folder 2',
      leaf: false,
      expanded: false,
      children: []
    }, {
      text: 'SomeFile.txt',
      leaf: true
    }]
  }]
}

С приведенными выше данными приступим к созданию компонента.

корневой компонент

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

rootкомпонент будет содержатьfolderсвойства, мы положимrootОбъект данных привязан к этому свойству. Это свойство будет передано подкомпонентам, которые рекурсивно создадут на его основе древовидную структуру папок.

Template

<template>
  <ul class="folders">
    <li>Folders</li>
    <folder v-bind:folder="folder"></folder>
  </ul>
</template>

код

import Folder from './Folder.vue';

export default {
  name: 'root',
  props: {
    folder: Object
  },
  components: {
    Folder
  }
};

стиль

ul.folders {
  padding: 1rem;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  list-style: none
}
ul.folders > li:first-child {
  padding: 1rem 1rem 1rem 0
}

Это так просто. ‘

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

Этот компонент отвечает за рендеринг каждой папки в дереве. Он отвечает за отображение информации о текущей папке и отрисовку ее подпапок (если они есть). Кроме того, эти папки являются кликабельными, и, щелкнув одну из них, компонент отобразит вложенные в нее папки и файлы.

Template

<template>
  <li class="folder" v-bind:class="[folder.leaf ? 'is-leaf' : 'is-folder']">
    <span v-on:click="expand()">{{ folder.text }}</span>

    <ul class="sub-folders" v-if="folder.children && folder.children.length > 0" v-show="folder.expanded">
      <folder v-for="child in folder.children" v-bind:folder="child"></folder>
    </ul>
    <div class="folder-empty" v-else v-show="!folder.leaf && folder.expanded">No Data</div>
  </li>
</template>

Code

export default {
  name: "folder",
  props: {
    folder: Object
  },
  methods: {
    expand() {
      if (this.folder.leaf) {
        return;
      }

      this.folder.expanded = !this.folder.expanded;
    }
  }
};

стиль:

li.is-folder {
  padding: 1rem;
  border-left: 1px solid #d3d3d3;
  margin-bottom: 0.5rem
}
li.is-folder > span {
  padding: 0.5rem;
  border: 1px solid #d3d3d3;
  cursor: pointer;
  display:inline-block
}
li.is-leaf {
  padding: 0 0 0 1rem;
  color: #000;
}
ul.sub-folders {
  padding: 1rem 1rem 0 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  list-style: none
}
div.folder-empty {
  padding: 1rem 1rem 0 1rem;
  color: #000;
  opacity: 0.5
}

Пример использования

Чтобы использовать только что созданный компонент, все, что нам нужно сделать, это добавитьrootКомпоненты импортируются там, где необходима эта функциональность, и передаются структуры данных. Например, вApp.vueиспользуется в:

Template

<template>
  <div class="vue-app">
    <root v-bind:folder="root"></root>
  </div>
</template>

Code

import Root from './Root.vue';

export default {
  name: 'app',
  data: function () {
    return {
      root: {
        text: 'Root Folder',
        leaf: false,
        expanded: true,
        children: [{
          text: 'Sub Folder 1',
          leaf: false,
          expanded: false,
          children: [{
            text: 'Sub Sub Folder 1',
            leaf: false,
            expanded: false,
            children: [{
              text: 'SomeFile1.js',
              leaf: true
            }]
          }, {
            text: 'Sub Sub Folder 2',
            leaf: false,
            expanded: false,
            children: []
          }, {
            text: 'SomeFile.txt',
            leaf: true
          }]
         }]
        }
      }
    },
    components: {
      Root
    }
};

текущий результат:

Суммировать

Рекурсия не так сложна, как кажется, она просто выполняет один и тот же блок кода снова и снова с разными входными параметрами, пока не будет достигнута конечная точка. Я надеюсь, что эта статья помогла вам лучше понять рекурсию и то, как создавать рекурсивные компоненты с помощью Vue.

Ошибки, которые могут быть в редактировании, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки потом, много времени тратится на отладку журнала.Кстати, всем рекомендую полезный инструмент мониторинга BUG.Fundebug.

оригинал:Dev induct.com/blog post/32…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории