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

我正在使用由vue-router触发的单个文件组件。我有一个components/Header.vue，它使用一个孩子modals/HelpModal.vue，而孩子则有一个孩子components/Modal.vue。Vue.js 2如何访问方法中的数据

我想周围的事件传递，以保持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>

我可能会去这一切完全错误的，但它是我能看到它的工作，以在触发帮助模态标头中的链接，打开

来源

2017-02-23 Titan

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

一个普通的function定义将根据它的调用方式确定上下文，所以component.method()将有component作为它的上下文，这就是你想要的。

如果你的方法不引用this，您可以使用箭头的功能，但我建议反对，因为随之而来的是你更新的定义，使用this次，它会咬你的。

来源

2017-02-23 15:35:19

试试这个：

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

这是我用我的数据我的部件。

来源

2017-02-23 15:56:54

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

回答

相关问题