@Chemnan

Как вызвать метод в другом компоненте, который находится на другом уровне?

Необходимо вызвать метод, который находится на другом уровне. Как это сделать?
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
@MikUrrey
Из всех решений наилучшими будет пара приемов, которые сводятся к выводу взаимодействий на глобальный уровень.
1) Как уже подсказали, event bus. Но лучше всего не так, как рекомендует документация, а на экземпляре $root. Например:

//один из компонентов сообщает, что надо что-то выполнить
methods: {
  iChangeSomething(value) {
    this.$root.$emit("something-changed", value)
  }
}

//другой это выполняет силами своего метода
methods: {
  somethingChanged(value) {
    console.log({value})
  }
},
created() {
    this.$root.$on("something-changed", this.somethingChanged )
},
destroy() {
    this.$root.$off("something-changed", this.somethingChanged )
}


2) Плагин, который "сшит" с компонентом, и транслирует его метод в глобальную область.
//определяем
//@/plugins/user.js
let doSomething = () => null

export default function install(Vue) => {
  
  const MyComponent = {
    name: "MyComponent ",
    methods: {
      doSomething() {
         console.log("I'm doing something!")
      }
    },
    created() {
      doSomething = this.doSomething
    },
    render: function (createElement) {
      //...
    }
  }
  
  Vue.component('MyComponent', MyComponent)
  Vue.prototype.$doSomething = doSomething
}

//подключаем
//main.js
import {VuePlugin as User} from "@/plugins/user"
Vue.use(User)
new Vue({ ...

//используем
methods: {
   doSomething() {
      this.$doSomething()
   }
}

<!-- или так -->
<button @click="$doSomething">BUTTON</button>

Но здесь - один нюанс: придется прописывать render не тегами, а функциями.
Поэтому решение годно больше для некоего универсального пакета, который вы сможете потом повторно использовать в других проектах с минимальными изменениями.

Vuex - возможно, но не всегда уместно. Это инструмент работы с общими данными, он целесообразен в более-менее крупных проектах. Если стоит задача типа "чтобы от различных действий затемнялась общая панелька в UI", то лучше сделать панельку плагином, чем заводить ее свойства в store.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы