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

Пользователь

от bernardo_nolan , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от nicolette.stoltenberg , год назад

@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.