Любой способ вызвать mixin (метод) из экземпляра root без использования $ root? - PullRequest
0 голосов
/ 30 апреля 2020

Здравствуйте, коллеги-программисты, мне нужна помощь: я бы хотел вызвать следующий метод без $ root. Это будет возможно? Я использую Vue Single File Components. Я получил следующее:

//app.js

const mixin = {
methods: {
    makeToast(title = "", content = "", hideAfter = 5000, position = 'b-toaster-bottom-right', append = true) {
        this.$bvToast.toast(`${content}`, {
            title: title,
            toaster: position,
            appendToast: append,
            autoHideDelay: hideAfter,
        })
    }
  }
}

const app = new Vue({
    el: '#vue-app',
    i18n,
    mixins: [mixin],
});

, которое затем вызывается как

<b-button @click="$root.makeToast('title','content here',2000);">CLICK FOR TOAST</b-button>

в каждом компоненте, который у меня есть. Это прекрасно работает, но я бы хотел вызывать метод только через makeToast и не использовать $ root раньше. Я попробовал следующее при инициализации экземпляра vue:

const app = new Vue({
    el: '#vue-app',
    i18n,
    mounted: function() {
        var makeToast = this.$root.makeToast;
        return makeToast;
    },
    mixins: [mixin],
});

также с созданным, с возвратом и без него, et c. много разных подходов, как этот. Я понятия не имею, как это сделать. Любая помощь, а также объяснения или sidenotes будут с благодарностью. Спасибо за ваше время!

Редактировать: Я попробовал предлагаемое решение здесь, но без удачи. Он говорит мне, что функция не определена или имеет значение null или какую-либо ошибку в зависимости от того, что я пытаюсь. Может быть, потому что я использую эту функцию внутри компонентов?

1 Ответ

0 голосов
/ 30 апреля 2020

Я нашел решение случайно (точнее, перечитывая документы заново)

Используя Vue Прототип:

Vue.prototype.$flash = function (title = "", content = "", hideAfter = 5000, position = 'b-toaster-bottom-right', append = true) {
    this.$bvToast.toast(`${content}`, {
        title: title,
        toaster: position,
        appendToast: append,
        autoHideDelay: hideAfter,
    })
};

в приложении. js, затем Вы можете использовать $ fla sh (ПАРАМЕТРЫ ЗДЕСЬ) в каждом компоненте!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...