Vue.js 2 如何在方法中访问数据答案

【问题标题】：Vue.js 2 how to access data in methodVue.js 2 如何在方法中访问数据
【发布时间】：2017-02-23 15:05:28
【问题描述】：

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

我正在尝试传递事件以保持 Modal.vue 可重复使用，但我似乎无法从 HelpModal.vue 的事件中访问 this.show

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>

我可能完全错误地处理这一切，但这是我可以看到它在标题中具有触发帮助模式打开的链接的唯一方法

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

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

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

如果你的方法没有引用this，你可以使用箭头函数，但我建议不要这样做，因为有时你会更新定义，使用this，并且它会咬你的。

【讨论】：

【解决方案2】：

试试这个：

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

这就是我将数据用于组件的方式。

【讨论】：