Question

我使用从vue-router触发的单个文件组件。我有一个components/Header.vue，它使用了一个孩子modals/HelpModal.vue，后者又生了一个孩子components/Modal.vue。

我试图传递事件以保持Modal.vue可重复使用，但我似乎无法在{{1}中的事件中访问this.show }

Modal.vue

HelpModal.vue

HelpModal.vue

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

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

Header.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
        })
    }
}

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

Answer 1

Don't use arrow functions to define your methods。执行this时会出错，因为箭头函数从定义时起保留this（也称为上下文）。方法被定义为组件定义过程的一部分，因此组件不是定义方法时的上下文。

普通function定义将根据其调用方式确定上下文，因此component.method()将component作为其上下文，这就是您想要的。

如果您的方法没有引用this，那么可以使用箭头功能，但我建议不要使用它，因为有时您会更新定义，请使用{ {1}}，它会咬你。

Vue.js 2如何访问方法

1 个答案: