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

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

jaylen.trantow

от jaylen.trantow , в категории: JavaScript , 4 месяца назад

7 | 0

1 ответ

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

wilburn

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

@jaylen.trantow

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

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

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

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Привет из родительского компонента!'
    };
  }
};
</script>

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

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

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

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

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

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

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

<template>
  <div>
    <button @click="emitEvent">Нажми меня</button>
  </div>
</template>

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

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

0 | 0

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

1 ответ

Похожие обсуждения: