Vuejs компонент связи

Question

Я пытаюсь установить связь между двумя компонентами, используя $ emit и $ on :

Я не могу установить связь между двумя компонентами и не могу обновить диаграмму старших диаграмм в компоненте-B от события щелчка в компоненте-A.

Код JavaScript для Компонента-A:

import Vue from 'vue';

const bus = new Vue();

const pause = ms => new Promise(resolve => setTimeout(resolve, ms));


export default {

  data: () => ({
    active: [],
    avatar: null,
    open: [],
    users: [],
  }),

  computed: {
    items() {
      return [
        {
          name: 'Users',
          children: this.users,
        },
      ];
    },
    selected() {
      if (!this.active.length) return undefined;

      const id = this.active[0];

      return this.users.find(user => user.id === id);
    },
  },

  methods: {

    fetchData() {
      const id = this.active[0];
      this.parts = this.users.find(user => user.id === id);
      bus.$emit('new_parts', this.parts.data);
      console.log(this.parts.data);
    },


    async fetchUsers(item) {
      // Remove in 6 months and say
      // you've made optimizations! :)
      await pause(1500);

      return fetch('http://localhost:8081/api/toppartsdata')
        .then(res => res.json())
        .then(json => (item.children.push(...json)))
        .catch(err => console.warn(err));
    },

  },
};

Код JavaScript для Компонента-B:

    import VueHighcharts from 'vue2-highcharts';
import Vue from 'vue';

const bus = new Vue();

const asyncData = {
  name: 'Prediction Chart',
  marker: {
    symbol: 'circle',
  },
  data: [],
};
export default {
  components: {
    VueHighcharts,
  },
  data() {
    return {
      options: {
        chart: {
          type: 'spline',
          title: '',
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        },
        yAxis: {
          title: {
            text: 'LINECOST',
          },
          labels: {
            formatter() {
              return `${this.value}°`;
            },
          },
        },
        tooltip: {
          crosshairs: true,
          shared: true,
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          spline: {
            marker: {
              radius: 4,
              lineColor: '#666666',
              lineWidth: 1,
            },
          },
        },
        series: [],
      },
    };
  },
  methods: {
    test() {
      // eslint-disable-next-line func-names

      bus.$on('new_parts', (data) => {
        alert(value);
      });
    },
    load() {
    // eslint-disable-next-line func-names
      bus.$on('new_parts', function (data) {
        this.asyncData.data = data;
      });
      const { lineCharts } = this.$refs;
      lineCharts.delegateMethod('showLoading', 'Loading...');
      setTimeout(() => {
        lineCharts.addSeries(asyncData.data);
        lineCharts.hideLoading();
      }, 2000);
    },
  },
};

Я хочу иметь возможность обновлять свой график временной шкалы старших графиков, используя события щелчка от компонента-A, и обновлять данные, поступающие с события на компонент-B, каждый раз при нажатии новой кнопки.

Answer 1

Ваш последний код почти верен, но здесь неправильная часть:

Неправильный код:

created() {
   bus.$on('new_user', (data) => { this.series = data; });
}

this.series не относится к данным серии, вместо этого вы добавляете новое свойство ко всему объекту компонента. В вашем случае это должно выглядеть так:

Правильный код:

created() {
   bus.$on('new_user', (data) => { this.options.series[0].data = data; });
}

Я подготовил вам онлайн-пример, используя highcharts-vue официальную оболочку Highcharts для VUE, которую я вам рекомендую. Там вы найдете рабочий код со связью между компонентами.

Демо:
https://codesandbox.io/s/r0qmqjljwq

Answer 2

Самый простой способ - использовать this. $ Root для генерации и прослушивания события:

Для отправки события из компонента-a:

this.$root.$emit('new_parts', this.parts.data)

Чтобы прослушать событие на компоненте b:

 mounted() {
            this.$root.$on('new_parts', (data) => {
                //Your code here

            });
        },

Пожалуйста, добавьте onclick в смонтированный метод.

Вот хорошая статья о событиях на Vue: https://flaviocopes.com/vue-components-communication/

Answer 3

Ниже приведен обновленный код для моего компонента Highcharts:

<template>
  <div>
    <vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
  </div>
</template>

<script>
import VueHighcharts from 'vue2-highcharts';
import { bus } from '../../../main';


export default {

  props: {
    partsdata: {
      type: Array,
    },
  },


  components: {
    VueHighcharts,

  },
  data() {
    return {

      options: {
        chart: {
          type: 'spline',
          title: 'Hassaan',
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        },
        yAxis: {
          title: {
            text: '',
          },
          labels: {
            formatter() {
              return `${this.value}°`;
            },
          },
        },
        tooltip: {
          crosshairs: true,
          shared: true,
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          spline: {
            marker: {
              radius: 4,
              lineColor: '#666666',
              lineWidth: 1,
            },
          },
        },
        series: [],
      },
    };
  },


  created() {
    bus.$on('new_user', (data) => { this.series = data; });
  },

};
</script>

Answer 4

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

Попробуйте вытащить его в отдельный файл, например bus.js, затем экспортируйте его и импортируйте в компоненты, где вам нужно с ним взаимодействовать:

// bus.js
export default new Vue()

// Component A
import bus from './bus'

bus.$emit('new_parts', this.parts.data)

// Component B
import bus from './bus'

bus.$on('new_parts', (data) => {
  alert(value);
})

Дайте мне знать, если что-то не имеет смысла.