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

Question

我需要 运行 邮件列表标签中的 refreshMailList 函数捕获来自邮件列表组件的点击事件。

我有这个组件的 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>
  `
  });