Question

我有一个简单的组件，但我无法访问组件

中的数据

这是我的组件

<template>
  <!-- success -->
  <div class="message-box message-box-success animated fadeIn" id="message-box-success">
    <div class="mb-container">
      <div class="mb-middle">
        <div class="mb-title"><span class="fa fa-check"></span>&nbsp;{{title}}&nbsp;</div>
        <div class="mb-content">
          <p>{{successMessage}}</p>
        </div>
        <div class="mb-footer">
          <button class="btn btn-default btn-lg pull-right mb-control-close" @click.prevent="close">OK</button>
        </div>
      </div>
    </div>
  </div>
  <!-- end success -->

</template>

<script>
/* eslint-disable no-undef */

export default {
  name: 'SuccessMsg',
  props: {
    title: ''
  },
  data () {
    return {
      successMessage: 'success'
    }
  },
  methods: {
    show: function (message) {
      // in this line I'm getting undefined in console
      console.log(this.successMessage)
      // this.successMessage = message
      $('#message-box-success').addClass('open')
    },
    close: function () {
      $('#message-box-success').removeClass('open')
    }
  }
}
</script>

我在其他常规页面中没有问题，但在组件中我无法访问数据。

请帮我解决此问题。

提前致谢

Answer 1

感谢@IsraGab的回复和代码。你说得对，但是我还没有正确地提出另一个问题。

当我以不正确的方式从主应用程序调用组件方法时，它无法正常工作。经过一天的搜索，我找到了解决方案。使用Component Refs

调用方法的正确方法是：

this.$refs.errMsg.show('some messages')

我们有这样的组件标签：

<v-error ref="errMsg"></v-error>

再次感谢所有

Vuejs组件无法访问数据

1 个答案: