Очки знаний реквизита в Vue можно просмотреть здесь!

JavaScript Vue.js

Автор: Майкл Тиссен

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

Источник: Майкл

Если вы читали о «реквизитах», вы увидите, что мы, вероятно, используем их все время (даже не осознавая этого), но, возможно, вы не совсем уверены, что это такое. Или как их правильно использовать и извлечь из них максимальную пользу.

К тому времени, когда вы закончите читать это руководство, вы будете знать все, что вам нужно знать о свойствах, чтобы стать эффективным разработчиком Vue.

В этом руководстве мы рассмотрим самые важные вещи о реквизите:

  • Что такое реквизит?
  • Две основные характеристики реквизита
  • Как передать реквизит другим компонентам
  • Добавить тип реквизита
  • Добавьте необходимые реквизиты
  • установить значение по умолчанию

Что такое реквизит?

propsэто то, как мы передаем переменные и другую информацию между различными компонентами. Это похоже на то, как в JS мы можем передавать переменные в качестве параметров функциям:

const myMessage = "I'm a string";

function addExclamation(message) {
  return message + '!';
}

console.log(addExclamation(myMessage)); // I'm a string!

Здесь мы помещаем переменнуюmyMessageкак параметрmessageпередается в функцию. Внутри функции мы можем получить это значение какmessageдоступ.

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

Две основные характеристики реквизита

обработкаprops, есть две вещи, на которые следует обратить особое внимание:

  1. propsПройти по дереву компонентов к потомкам (не вверх)

  2. propsдоступен только для чтения и не может быть изменен

Vue использует односторонний поток данных, что означает, что данные могут передаваться только от родителя к дочернему элементу и не могут передавать данные от дочернего элемента к родительскому. Поскольку родительский компонент «владеет» передаваемым значением, дочерний компонент не может его изменить. Отслеживать ошибки проще, если только одному компоненту разрешено изменять его, потому что мы точно знаем, где искать.

Следите за тем, чтобы при разработке не нарушались эти два правила, разработка станет проще, а причину проблемы найти проще. Далее посмотрим, какpropsПереход от одного компонента к другому.

Передать реквизиты другим компонентам

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

<template>
  <Camera
	name="Sony A7RIV"
	img="../sony-a7riv.jpg"
  />
</template>

Cameraкомпонент будет использоватьnameа такжеimgprops для отображения собственной страницы. Содержание примерно такое:

<template>
  <div class="camera">
	<h2 class="camera__name">{{ name }}</h2>
	<img class="camera__image" :src="img" />
  </div>
</template>

Здесь мы будемnameоказыватьh2пометить и использоватьimgнастраиватьimgотмечен наsrcАтрибуты.

Но что, если мы сохраним эту информацию где-нибудь в переменной?

Для этого нам нужно использовать немного другой синтаксис, так как мы хотим использовать JS-выражения вместо передачи строк.

<template>
  <Camera
	v-bind:name="cameraName"
	v-bind:img="cameraImage"
  />
</template>

v-bind:name="cameraName"строка говорит Vue поместить выражение JScameraNameпривязать к опореname. Выражение JS — это любой фрагмент кода в JS. Может быть, имя переменной, как здесь, или что-то более сложное.

Вы также можете использовать логическое илиimgЗадайте путь к изображению:

<template>
  <Camera
	v-bind:name="cameraName"
	v-bind:img="cameraImage || '../no-camera-found.jpg'"
  />
</template>

v-bind может быть сокращенным:

<template>
  <Camera
	:name="cameraName"
	:img="cameraImage || '../no-camera-found.jpg'"
  />
</template>

добавить реквизит

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

export default {
  name: 'Camera',
  props: ['name', 'img'],
}

Обычно не рекомендуется писать это, это должно бытьpropsУказанный тип объекта:

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
  	},
  	img: {
      type: String,
  	}
  }
}

Переходя от массивов к объектам, мы можем указать больше деталей свойств, таких как типы. Почему мы должныpropsДобавить тип?

В Vue props может иметь много разных типов:

  • String
  • Number
  • Логическое значение (истина или ложь)
  • Array
  • Object

Добавляя типы, мы можем установить тип данных, которые мы ожидаем получить. если мы будемcameraв реквизитеnameУстановить какtrue, это не сработает, поэтому Vue предупредит нас об ошибке использования.

Затем добавьтеratingнашимCameraкомпонент,ratingТипNumber:

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
  	},
  	img: {
      type: String,
  	},
  	rating: {
      type: Number,
  	},
  }
}

а затем показать в шаблонеrating:

<template>
  <div class="camera">
	<h2 class="camera__name">{{ name }}</h2>
	<span class="camera__rating">{{ rating }}</span>
	<img class="camera__image" src="img" />
  </div>
</template>

Вызов во внешнем слое:

<template>
  <Camera
	name="Sony A7RIV"
	img="../sony-a7riv.jpg"
	:rating="9"
  />
</template>

Требуемый реквизит

Не все реквизиты одинаковы, и некоторые из них необходимы для правильной работы компонента.

за нашихCameraкомпоненты, нам обязательно нуженname,ноimgа такжеratingне обязательно.

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
      required: true,
  	},
  	img: {
      type: String,
  	},
  	rating: {
      type: Number,
  	},
  }
}

установивrequired: trueМы спросили, наше имя нужно будет передать, наоборот,requiredдляfalseСоответствующие реквизиты могут быть переданы или нет.

По умолчанию

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

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
      required: true,
  	},
  	img: {
      type: String,
      default: '../no-camerage-found.jpg',
  	},
  	rating: {
      type: Number,
  	},
  }
}

Ранее мы использовали логическое ИЛИ какimgДобавьте значения по умолчанию, на этот раз мы используемdefaultсобственностьimgУстановите значение по умолчанию.

Это также необходимо для нашегоratingУстановите значение по умолчанию. Если он не установлен и не передан извне, мы получим при посещенииundefined, что может вызвать у нас некоторые проблемы

Использование реквизита вне шаблонов

Хотя это возможноtemplateиспользуется вpropsОтличный, но действительно мощный из-за их использования в других методах JS для расчета свойств и компонентов.

В нашем шаблоне мы видим, что нам нужно только имя реквизита, например:{{rating}}. Однако где-либо еще в компоненте Vue нам нужно использоватьthis.ratingПосетите наш реквизит.

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

Мы будем использовать следующую структуру:./images/cameras/${cameraName}.jpg

Итак, если камераSony A6400,ноURL将变为./images/cameras/Sony%20A6400.jpg.％20происходит от кодирования символа пробела, поэтому мы можем использовать его в URL-адресе.

Во-первых, мы удалим те, которые больше не нужныimg props

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
      required: true,
  	},
  	rating: {
      type: Number,
      default: 0,
  	},
  }
}

Затем мы добавим вычисляемое свойство, которое сгенерирует для нас URL-адрес изображения:

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
      required: true,
  	},
  	rating: {
      type: Number,
      default: 0,
  	},
  },
  computed: {
    img() {
      return `./images/cameras/${encodeURIComponent(this.name)}.jpg`;
    }
  }
}

Не все символы можно использовать в URL-адресах, поэтомуencodeURIComponentпреобразует эти символы для нас.

Поскольку мы можем получить доступ к этому вычисляемому реквизиту так же, как и к обычным реквизитам, нам вообще не нужно менять шаблон, и шаблон может оставаться таким же, как и раньше:

<template>
  <div class="camera">
    <h2 class="camera__name">{{ name }}</h2>
    <span class="camera__rating">{{ rating }}</span>
    <img class="camera__image" src="img" />
  </div>
</template>

Таким образом, вы можете использовать свойства компонента в:

  • смотреть
  • крючки жизненного цикла
  • method
  • рассчитано в

и где-либо еще в определении компонента!

Суммировать

Выше приведены точки знаний о реквизите, но всегда есть чему поучиться. Vue также является бесконечным процессом обучения. продолжать идти !

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

оригинал:реагировать go.com/v UE JS-реквизит…

общаться с

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

Категории