Почему this.$props в скрипте компонента всегда undefined?

Question

[Антон Иванов]

Есть компонент:

<template>
    <form>
        {{this.$props}}
        <hr>
        {{thisPropsMethod()}}
        <hr>
        {{thisPropsComputed}}
    </form>
</template>

<script>
    export default {
        name: "horizontal-form",
        props: ['test', 'formOptions'],
        methods: {
            thisPropsMethod: () => {
                return this.$props;
            },
        },
        computed: {
            thisPropsComputed: () => {
                console.log(this.$props)
                return this.$props;
            },
        }
    }
</script>

<style scoped>

</style>

Данный компонент вызывается вот так:

<horizontal-form
            test="{a: 'asdasdasd'}"
            formOptions="{submitText: 'blablabla'}"
    />

Что имеем. В шаблоне один раз выводятся все props (срабатывает {{this.$props}}) и все (два hr нормально выводятся после первого вывода пропсов). console.log из computed функции выдает undefined. VueJS Devtools все пропсы видит.
Вопрос - почему пропсы недоступны в скрипте компонента? Ни через this.$props, ни напрямую через this.test.

Answer 1

[0xD34F]

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

Comments

[Антон Иванов]

Ну вот. А ларчик просто открывался. Пошел дальше просвящаться. Спасибо.

[Антон Иванов]

0xD34F

Все же не понимаю, в чем разница. Ведь

thisPropsMethod: () => {
                return this.$props;
            }

должно вебпаком быть сконвертировано в

thisPropsMethod: function() {
                return this.$props;
            }

Почему стрелочная функция не работает?

[Антон Иванов]

Кажется понял. Проблема в обработке "this" стрелочными функциями