Как использовать реквизиты в Vue.js

1656020528 kak ispolzovat rekvizity v vuejs

Мы используем props для передачи информации/данных от родительского компонента к дочерним компонентам. В этой статье я объясню все, что вам нужно знать о props и почему вы должны использовать props в Vue.js.

Вот краткое описание того, что мы рассмотрим в данном руководстве:

  • Что такое props в Vue.js?
  • Как зарегистрировать props внутри компонента
  • Как работать с несколькими реквизитами
  • Типы реквизитов Vue.js
  • Как передать данные в реквизит
  • Как передать функции в props
  • Как проверить реквизит
  • Как установить значение по умолчанию для реквизитов

Что такое Props в Vue.js?

«Реквизит» – это специальное ключевое слово, обозначающее свойства. Его можно зарегистрировать на компоненте передачи данных от родительского компонента к одному из его дочерних компонентов.

Это гораздо проще по сравнению с использованием библиотек управления состоянием, таких как vuex, для программ Vue.js.

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

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

Давайте теперь сбалансируем ситуацию – родительские компоненты передают реквизиты дочерним компонентам, а дочерний компонент выдают события родительскому компоненту(ам).

Как зарегистрировать реквизит внутри компонента

Давайте теперь посмотрим, как мы можем зарегистрировать props внутри компонента.

Vue.component('user-detail', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})
.js

или в однофайловом компоненте Vue:

<template>
  <p>{{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>

В приведенном выше коде мы зарегистрировали сопротивление под названием name которую мы можем вызвать в разделе шаблонов программы.

Примечание: это дочерний компонент и этот prop будет получать данные от родительского компонента. Я объясню это подробнее позже.

Как работать с несколькими реквизитами

Вы можете иметь больше одного реквизита, добавив их в массив props, вот так:

Vue.component('user-detail', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

или в однофайловом компоненте Vue:

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: [
    'firstName', 
    'lastName'
  ],
}
</script>

Типы Prop Vue.js

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

Если тип передаваемых данных не соответствует типу prop, Vue посылает уведомление (в режиме разработки) на консоль с предупреждением. Вы можете использовать следующие действительные типы:

  • строка
  • Номер
  • логическое значение
  • Массив
  • Объект
  • Дата
  • Функция
  • символ
Vue.component('user-detail', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

или в однофайловом компоненте Vue:

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
}
</script>

Как передать данные в Props в Vue

Основная цель использования реквизита – передача данных/информации. Вы можете передать свое значение как свойство данных с помощью v-bind, например в этом коде:

<template>
  <ComponentName :title=title />
</template>

<script>
export default {
  //...
  data() {
    return {
      title: 'Understanding Props in vuejs'
    }
  },
  //...
}
</script>

или как статическое значение, например:

<ComponentName title="Understanding Props in vuejs" />

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

Вот родительский компонент:

<template>
  <div id="app">
    <Button :name="btnName" bgColor="red" />
    <Button :name="btnName" bgColor="green" />
    <Button :name="btnName" bgColor="blue" />
  </div>
</template>

<script>
import Button from './components/Button'

export default {
  name: 'App',
  data(){
    return{
      btnName:"Joel",
    }
  },
  components: {
    Button
  }
}
</script>

А вот дочерний компонент:

<template>
  <button class="btn" :style="{backgroundColor:bgColor}">{{name}}</button>
</template>
<script>
export default {
  name: 'Button',
  props:{
    name:String,
    bgColor:String
  }
}
</script>

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

Примечание: Вы также можете использовать тройной оператор внутри prop, чтобы проверить истинное условие и передать значение, зависящее от него.

<template>
  <div id="app">
    <Button :tagUser="signedUp ? 'Logout' : 'Login'" bgColor="red" />
  </div>
</template>
<script>
import Button from './components/Button'
export default {
  name: 'App',
  data(){
    return{
      signedUp: true,
    }
  },
  components: {
    Button
  }
}
</script>

В приведенном выше коде мы проверяем signedUp свойство данных. Если это правда, отправленные данные должны быть следующими Выйти, иначе должно быть Войти.

Как передать функции в Props

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

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

<template>
  <ChildComponent :function="newFunction" />
</template>
<script>
export default {
  methods: {
    newFunction() {
      // ...
    }
  }
};
</script>

Как проверить реквизит в Vue

Vue делает проверку реквизитов очень легкой. Все, что вам нужно сделать, это добавить необходимый ключ и его значение в prop. Мы можем проверить как по типу опоры, так и с помощью required:

props: {
  name: {
    type: String,
    required: true
  }
}

Как установить значение параметра по умолчанию

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

Vue позволяет указать значение по умолчанию, как мы указали required раньше.

props: {
  name: {
    type: String,
    required: true,
    default: 'John Doe'
  },
  img: {
    type: String,
    default: '../image-path/image-name.jpg',
   },
}

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

Вывод

В этой статье мы узнали, что делают props и как работает props в Vue.js.

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

изображение-50

Спасибо, что читаете!

полезные ссылки

Добавить комментарий

Ваш адрес email не будет опубликован.