VueJs SPA在单击按钮上执行功能

Question

我需要从邮件列表标记中运行refreshMailList函数来捕获来自邮件列表组件的click事件。

我有这个具有此组件的Vue实例：

Vue.component('mail-list', {
  props: ['inboxmail'],
  template:
  `
  <div>
    <h4>{{inboxmail}}</h4>
    <button>Refresh</button>
  </div>
  `
  });


//Creating the Vue object.
let options = {
  el: "#app",
  data: {
    pollingId: null,
    inbox: ''
  },

  created: function() {
    this.refreshMailList()
  },
methods:{
    refreshMailList: function(){
      fetch('/inbox')
      .then(response => response.json())
      .then(aJson => {
        this.inbox = aJson;
      })
    },

  } //end methods
} //end options

//ViewModel (vm)
let vm = new Vue(options);

而且我有这个index.html：

      <div id="app">
        <mail-list v-bind:inboxmail="inbox" @refresh='refreshMailList'></mail-list>
      </div>

Answer 1

您需要从邮件列表组件内部发出事件。

尝试此代码段：

 Vue.component('mail-list', {
  props: ['inboxmail'],
  methods: {
    refresh: function() {
      this.$emit('refresh');
    },
  },
  template:
  `
  <div>
    <h4>{{inboxmail}}</h4>
    <button @click="refresh">Refresh</button>
  </div>
  `
  });