Свойства компонента Vue.js

Свойства используются для передачи состояния дочерним компонентам. Узнай о них все

Определите опору внутри компонента

Свойства - это способ, которым компоненты могут принимать данные от компонентов, которые их включают (родительские компоненты).

Когда компонент ожидает одну или несколько опор, он должен определить их в своемpropsсвойство:

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

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

<template>
  <p>{{ name }}</p>
</template>
<script>
export default {
props: [‘name’]
}
</script>

Принять несколько реквизитов

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

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

Установите тип опоры

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

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

Допустимые типы, которые вы можете использовать:

Нить
Число
Логический
Множество
Объект
Дата
Функция
Символ

Когда тип не совпадает, Vue предупреждает (в режиме разработки) в консоли с предупреждением.

Типы опор могут быть более сочлененными.

Вы можете разрешить несколько разных типов значений:

props: {
  firstName: [String, Number]
}

Сделайте опору обязательной

Вы можете потребовать, чтобы реквизит был обязательным:

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

Установить значение по умолчанию для опоры

Вы можете указать значение по умолчанию:

props: {
  firstName: {
    type: String,
    default: 'Unknown person'
  }
}

Для объектов:

props: {
  name: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

defaultтакже может быть функцией, которая возвращает соответствующее значение, а не фактическое значение.

Вы даже можете создать собственный валидатор, что отлично подходит для сложных данных:

props: {
  name: {
    validator: name => {
      return name === 'Flavio' //only allow "Flavios"
    }
  }
}

Передача props компоненту

Вы передаете опору компоненту, используя синтаксис

<ComponentName color="white" />

если то, что вы передаете, является статическим значением.

Если это свойство данных, вы используете

<template>
  <ComponentName :color=color />
</template>
<script>
…
export default {
//…
  data: function() {
return {
color: ‘white’
}
},
//…
}
</script>

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

<template>
  <ComponentName :colored="color == 'white' ? true : false" />
</template>
<script>
…
export default {
//…
  data: function() {
return {
color: ‘white’
}
},
//…
}
</script>

Скачать мою бесплатнуюСправочник по Vue