Как передать данные в компонент в Vue.js?

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

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

Как передать данные в компонент в Vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от dmitrypro77 , 2 года назад

@richard Используйте префикс : и props чтобы передать данные в компонтент на Vue.js, ниже пример кода как пример:


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<template>
  <div class="container">
    <h1>Тестовый компонент</h1>
    <child :name="name" />
  </div>
</template>

<script>
import Child from '@/components/Child'

export default {
  name: 'Parent',
  components: { Child },
  data: () => ({
    name: 'Тест',
  }),
}
</script>


Дочерний компонент:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="wrapper">
    <p>Привет {{ name }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    name: {
      type: String,
      required: false,
      default() {
        return ''
      },
    },
  },
}
</script>


Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.

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

от camren , 8 месяцев назад

@richard 

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


Пример:

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

  



  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent,
    },
    data() {
      return {
        parentName: 'John',
      };
    },
  };


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

  Hello {{ name }}



  export default {
    props: {
      name: {
        type: String, // устанавливаем тип данных
        required: true, // делаем свойство обязательным
      },
    },
  };


В данном примере мы передаем значение parentName из родительского компонента в дочерний через свойство name. Свойство name определено как String и обязательно для заполнения. В дочернем компоненте значение name выводится в тексте.