Как вызвать метод компонента vue из другого файла js

1

У меня есть Vue v2.3.4 (quasar-framework v0.14.2) modal ComponentA, работающий при нажатии на кнопку в том же компоненте. Компонент MyModal работает нормально (поскольку я могу запустить его с помощью кнопки). Однако у меня есть код в отдельном файле util.js, который должен запускать модальный (из "myUtilElement"). Как я могу это сделать?

ComponentA.vue

<template>
  <div>
    <div id='lotsofstuff'></div>
    <myModal ref="myModal"></myModal>
  </div>
</template>

<script>
import MyModal from '../MyModal.vue'

export default {
  name: 'componentA',
  components: {MyModal},
  methods: {
    openModal: function () {
      this.$refs.myModal.open()
    },
    otherMethods:...etc.
}

util.js

import ComponentA from '../ComponentA.vue'

myUtilElement.addEventListener('click', triggerModal, false)

function triggerModal () {
  ComponentA.methods.openModal()
}

Теперь я получаю следующую ошибку в консоли:

Uncaught TypeError: Cannot read property 'openModal' of undefined
    at HTMLElement.triggerModal
  • 0
    новый компонентА?
  • 2
    См. Общение между родителями и детьми на документах .
Показать ещё 4 комментария
Теги:
ecmascript-6
vue.js
vuejs2

2 ответа

3
Лучший ответ

См. Связь между родителями и детьми в документах. По сути, у вас есть два общих варианта: шина событий или централизованное управление состоянием.
Шина событий - это простой шаблон pub-sub:

var bus = new Vue()
// in component A method
bus.$emit('openModal', params)
// in component B created hook
bus.$on('openModal', function(params) {
  // ...
})

Наиболее распространенная библиотека централизованного управления состояниями для Vue - это Vuex, которая аналогична Flux/Redux/и т.д.

Изображение 174551

Поделиться
1

SRC/eventBus.js

import Vue from 'vue';
export default new Vue();

SRC/компоненты/ComponentA.vue

<template>
  <div>
    <div id="lotsofstuff">
      <!-- some code here -->
      <button type="button" class="btn btn-outline-secondary" @click="openModal">Open Modal</button>
    </div>
    <myModal></myModal>
  </div>
</template>

<script>
import MyModal from './MyModal.vue';
import EventBus from '../eventBus';

export default {
  name: 'componentA',

  components: {
    MyModal
  },

  methods: {
    openModal: function () {
      var params = {title: 'My Modal Title'}
      EventBus.$emit('OPEN_MODAL', params)
    },
    // otherMethods:...etc.
}
</script>

SRC/компоненты/MyModal.vue

<template>
  <div v-show="show">
    <div class="modal-title">{{ title }}</div>
    <!-- some code here -->
  </div>
</template>

<script>
import EventBus from '../eventBus';

export default {
  name: 'MyModal',

  data () {
    return {
      show: false,
      title: 'Default Title'
    }
  },

  created () {
    var self = this;

    EventBus.$on('OPEN_MODAL', function (params) {
      self.show = true;
      self.title = params.title;
    });
  },

  methods: {
    open () {
      this.show = true;
    },

    close () {
      this.show = false;
    }
  }
}
</script>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню