Как передавать данные между компонентами, размещенными в разных представлениях

Question

У меня два компонента, размещенные в одном и том же виде.

@extends('layouts.app') 
@section('content')
<bus></bus>
<bus2></bus2>
@endsection

Я хочу передать данные (имя) из одного компонента в другой после нажатия кнопки.Для этого я использую функцию $ emit.

/// bus component
<template>
    <div>
        <p> Name Bus 1{{name}}</p>
        <input type="button" @click="setName()"  value="s"/>
    </div>
</template>

<script>
export default {
  created() {},
  data: function() {
    return {
      name: "Volvo"
    };
  },
  methods: {
    setName: function(id) {
      this.$root.$emit("sname", this.name);
    }
  },
  props: []
};
</script>



///bus 2 component

<template>
    <div>
        <p> Name bus 2{{name}}</p>

    </div>
</template>

<script>
export default {
  created() {
    this.$root.$on("sname", data => {
      this.name = data;
    });
  },

  data: function() {
    return {
      count: 0,
      name: ""
    };
  },

  methods: {}
};
</script>

Все отлично работает.Имя передается из автобуса в автобус2.Проблема возникает, когда я помещаю bus2 в другое представление - данные не передаются, а код тот же.Как я могу передавать данные между компонентами, расположенными в разных видах

Answer 1

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

Состояния Vuex доступны из всех компонентов, используя this.$store или $store.