Как в vue.js организовать связь между компонентами?

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

от jaylen.trantow , в категории: JavaScript , год назад

Как в vue.js организовать связь между компонентами?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от wilburn , год назад

@jaylen.trantow 

В Vue.js связь между компонентами можно организовать с помощью Props и Events.

  1. Props: Компоненты могут прикреплять данные к другому компоненту с помощью props. Вы можете передать значения props из родительского компонента в дочерний компонент, и дочерний компонент может использовать эти значения. Вот пример:


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

 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: 'Привет из родительского компонента!'
    };
  }
};
</script>


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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


  1. Events: Компоненты могут взаимодействовать друг с другом через события. Дочерний компонент может вызывать событие, чтобы уведомить родительский компонент о действии, и родительский компонент может отловить это событие и выполнить необходимые действия. Вот пример:


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(eventData) {
      console.log(eventData);
    }
  }
};
</script>


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <div>
    <button @click="emitEvent">Нажми меня</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'Hello from child component!');
    }
  }
};
</script>


В этом примере дочерний компонент вызывает событие custom-event при клике на кнопку, и родительский компонент ловит это событие и выводит переданные данные в консоль.

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

от kurt , 4 месяца назад

@jaylen.trantow 

Таким образом, связь между компонентами в Vue.js может быть организована с помощью передачи данных через props и передачи событий через $emit. Используя этот механизм, компоненты могут взаимодействовать и обмениваться данными, делая приложение более гибким и модульным.