Доступ к экземпляру с помощью методов внутри пользовательского компонента Vue

#vue.js #vue-component

Вопрос:

Я пытаюсь получить доступ к методам/данным экземпляра с помощью запущенного метода внутри пользовательского зарегистрированного компонента Vue.

Ниже приведен основной пример:

 Vue.component('example-component', {
        template: `<div>
                        <h2>Count: {{count}}</h2>
                        <button class="btn btn-primary" v-on:click="increment()">Increment</button>
                    </div>`,
        data: () => {
            return {
                count: 0
            }
        },
        methods: {
            increment: () => {
                console.log("Click!");
                console.log("Current count: ", this.count);
                this.count  ;
                console.log("New count: ", this.count);
            },
            decrement: () => {
                // other function
            }
        },
        mounted: () => {
            console.log("Example component mounted!");
        }
    });

Результаты:

 Example component mounted!
Click!
Current count:  undefined
New count:  NaN

Как вы могли заметить, свойство «count» было загружено во время монтирования компонента и доступно/отображается внутри HTML. Также был запущен метод » инкремент ()». Однако «this.count» кажется недостижимым, как и возможные другие методы (например, » this.decrement ()»), которые вызовут ошибку типа this.decrement не является функцией.

Есть какие-нибудь предложения, возможен ли вообще такой подход?

пс. Я знаю о подходе по умолчанию через реестр файлов .vue, например:

 Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Ответ №1:

Объяснение из официальных документов:

Vue автоматически связывает это значение для методов, чтобы оно всегда указывало на экземпляр компонента. Это гарантирует, что метод сохранит правильное это значение, если он используется в качестве прослушивателя событий или обратного вызова. Вам следует избегать использования функций со стрелками при определении методов, так как это предотвращает привязку Vue к соответствующему этому значению.

Ответ, приведенный выше Фениксом, кажется верным, и я могу только добавить, что вы тоже можете писать функции в короткой форме, например:

 increment() { ... },
decrement() { ... }

что, на мой взгляд, выглядит приятнее, хотя есть небольшая разница.

Ответ №2:

Функции со стрелками не привязываются this . Вместо этого используйте обычные функции для своих методов.

 increment: function() { ... },
decrement: function() { ... }