Vue.js 2如何访问方法中的数据

Question

我正在使用从vue-router触发的单个文件组件.我有一个components/Header.vue孩子modals/HelpModal.vue,后者又有一个孩子components/Modal.vue.

我试图传递事件以保持可Modal.vue重用,但我似乎无法this.show从事件中访问HelpModal.vue

Modal.vue

<template>
    <div class="modal">
        <button class="modal__close" @click="$emit('close')">
        </button>

        <slot></slot>
    </div>
</template>

HelpModal.vue

<template>
    <modal v-if="show" @close="closeModal">...help modal content...</modal>
</template>

<script>
import Modal from 'components/Modal.vue'
import bus from 'eventBus'

export default {

    components: {
        Modal
    },

    data: () => {
        return {
            show: false
        }
    },

    methods: {
        closeModal: () => {
            this.show = false
        }
    },

    mounted: () => {
        bus.$on('showHelpModal', () => {
            console.log('show modal!', this.show); // undefined
            this.show = true
        })
    }
}

Header.vue

<template>
    <header>
        <button @click="showHelpModal">Show help</button>
        <help-modal></help-modal>
    </header>
</template>

<script>
    import HelpModal from 'views/modals/HelpModal.vue'
    import bus from 'eventBus'

    export default {

        components: {
            HelpModal
        },

        methods: {
            showHelpModal: () => {
                bus.$emit('showHelpModal')
            }
        }
    }
</script>

我可能会发现这一切都完全错了,但这是我能看到它在标题中有一个链接触发帮助模式打开的唯一方法

Answer 1

不要使用箭头函数来定义方法.执行时this会出错,因为箭头函数this从定义时起保留(也称为上下文).方法被定义为组件定义过程的一部分,因此组件不是定义方法时的上下文.

普通的function定义将根据它的调用方式确定上下文,因此component.method()将具有component您想要的上下文.

如果您的方法没有引用this,您可以使用箭头函数,但我建议不要使用它,因为有时您会更新定义,使用this它会咬你.