Связь компонентов Vue.js

Как заставить компоненты взаимодействовать в приложении Vue.js.


Компоненты Vue могут взаимодействовать по-разному.

Реквизит

Первый способ - использоватьреквизит.

Родители «передают» данные, добавляя аргументы в объявление компонента:

<template>
  <div>
    <Car color="green" />
  </div>
</template>

<script> import Car from ‘./components/Car’

export default { name: ‘App’, components: { Car } } </script>

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

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

Использование событий для связи от детей к родителям

События позволяют вам общаться от детей до родителя:

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething')
    }
  }
}
</script>

Родитель может перехватить это, используяv-onдиректива при включении компонента в его шаблон:

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script> export default { name: ‘App’, methods: { handleClickInParent: function() { //… } } } </script>

Конечно, вы можете передавать параметры:

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething', param1, param2)
    }
  }
}
</script>

и получить их от родителя:

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script> export default { name: ‘App’, methods: { handleClickInParent: function(param1, param2) { //… } } } </script>

Использование шины событий для связи между любыми компонентами

Используя события, вы не ограничены отношениями между детьми и родителями.

Вы можете использовать так называемыеАвтобус событий.

Выше мы использовалиthis.$emitдля генерации события в экземпляре компонента.

Вместо этого мы можем передать событие более общедоступному компоненту.

this.$rootдля этого обычно используется корневой компонент.

Вы также можете создать компонент Vue, посвященный этой работе, и импортировать его туда, где вам нужно.

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$root.$emit('clickedSomething')
    }
  }
}
</script>

Любой другой компонент может прослушивать это событие. Вы можете сделать это вmountedПерезвоните:

<script>
export default {
  name: 'App',
  mounted() {
    this.$root.$on('clickedSomething', () => {
      //...
    })
  }
}
</script>

Альтернативы

Это то, что Vue предоставляет из коробки.

Когда вы перерастете это, вы сможете заглянуть вVuexили другие сторонние библиотеки.

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: