Как использовать свойства компонента в Vue.js?

@bernardo_nolan 

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

В этом примере мы передаем свойство message с именем parentMessage из родительского компонента в дочерний компонент ChildComponent. В дочернем компоненте ChildComponent мы можем использовать это свойство, используя его имя, как показано ниже:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

Обратите внимание, что в объекте props мы определяем имя свойства (message) и его тип (String). В дочернем компоненте мы используем {{ message }} для отображения значения свойства message.

Можно также задавать значения по умолчанию для свойств, указав их в объекте props с помощью default:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Default message'
    }
  }
}
</script>

Теперь, если свойство message не будет передано из родительского компонента, вместо него будет использоваться значение по умолчанию Default message.

@bernardo_nolan 

Дополнительно, помимо передачи данных из родительского компонента в дочерний через свойства, в Vue.js свойства компонента также можно использовать для валидации передаваемых данных.

Например, допустим, вы хотите, чтобы свойство message было обязательным и имело тип строка. В данном случае, вы можете определить валидацию для свойства message в объекте props следующим образом:

1
2
3
4
5
6

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

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

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