Вопрос:

Как обмениваться данными между компонентами в VueJS

vue-component vue-router vue.js vuejs2

19195 просмотра

3 ответа

10176 Репутация автора

У меня довольно простое приложение VueJS, 3 компонента (Login, SelectSomething, DoStuff)

Компонент входа в систему - это просто форма для пользователя и ввода ввода, в то время как второй компонент должен отображать некоторые данные, полученные в процессе входа в систему.

Как я могу поделиться данными от одного компонента к другим? Чтобы при маршруте ко второму компоненту у меня все еще были данные, полученные при входе в систему?

Автор: daniels Источник Размещён: 24.10.2016 05:41

Ответы (3)


18 плюса

1522 Репутация автора

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

vm.$on('test', function (msg) {
  console.log(msg)
})

vm.$emit('test', 'hi')
// -> "hi"
Автор: highFlyingSmurfs Размещён: 25.10.2016 04:43

9 плюса

91 Репутация автора

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

Давайте возьмем этот небольшой пример:

<template>
<h2>Parent Component</h2>
<child-component></child-component>
</template>

Чтобы отправить информацию от родителя ребенку, вам нужно будет использовать реквизит:

<template>
<h2>Parent Component</h2>
<child-component :propsName="example"></child-component>
</template>

<script>
export default {
 data(){
  return{
   example: 'Send this variable to the child'
  }
 }
}
</script>

Чтобы отправить информацию от ребенка к родителю, вам нужно будет использовать события:

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

<script>
 ...
 this.$emit('example', this.variable);
</script>

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

<template>
<h2>Parent Component</h2>
<child-component @example="methodName"></child-component>
</template>

<script>
export default {
 methods: {
  methodName(variable){
   ...
  }
 }
}
</script>

Проверьте документацию vue.js для получения дополнительной информации по этому вопросу. Это очень краткое введение.

Автор: Jad Rizk Размещён: 19.10.2017 03:03

0 плюса

1288 Репутация автора

Используйте этот небольшой плагин, если у вас много вложенных компонентов:

Vue.use(VueGlobalVariable, {
  globals: {
    user: new User('user1'),
    obj:{},
    config:Config,
    ....
  },
});

Теперь вы можете использовать $userлюбой компонент без использования реквизита или других

Автор: mudin Размещён: 23.04.2019 12:15
32x32