$發出從小孩到父組件的Vue事件2

Question

我新的JS和Vue公司，所以請多多包涵:)

我有一個正在使用的是父元素的兩個組件Vue公司呈現一個表（表 - 訂單）和孩子（行 - 訂單）。

有一個按鈕可以在表中的每一行上按下該按鈕來對該行執行AJAX，但是我還需要在執行操作時刷新表（父），以便它具有更新數據。

我想我需要在孩子中使用$ emit將行爲傳遞給父母，但是我無法讓它工作。這裏是代碼（對不起，我刪除了一切非必要的）;

const order = { 
    template: ` 
     ...// table content 
     <td><button class="btn btn-default btn-sm" @click="assignAdvisor(id, 
             selectedOption)">Set Advisor</button></td> 
    `, 

    methods: { 
     // following is the method that is run when the button is pressed 

     assignAdvisor(id, selectedOption) { 
      axios.post('url').then(response => { 
       ..// show response message 
       orders.$emit('refreshAfterUpdate'); // also tried 
                // this.$parent.$emit(...) 
      })  
    }, 
}; 

const orders = { 
    components: { order, }, 

    props: { 
     orders: { 
      type: Object, 
     }, 
    }, 

    mounted() { 
     // this is basically the code that I need to re-run when button is pressed, 
     // which I have repeated below in a method 
     var refresh =() => { 
      axios.get('/admin/ajax/unassigned-orders') 
       .then(response => { 
       this.ordersData = response.data; 
       setTimeout(refresh, 5000); 
      }); 
     } 
     refresh(); 
    }, 

    methods: { 
     refreshAfterUpdate() { 
      axios.get('/admin/ajax/unassigned-orders') 
      .then(response => { 
      this.ordersData = response.data; 
      console.log(response); 
      }); 
     }, 
    } 
}; 

new Vue({ 
    render(createElement) { 
     const props = { 
      orders: { 
       type: Object, 
      }, 
     }; 
     return createElement(orders, { props }); 
    }, 
}).$mount('#unassignedOrders'); 

我沒有收到任何錯誤信息或任何東西 - 它只是不起作用。

謝謝

Answer 1

好吧，謝謝@Patrick Steele我已經想通了。

我沒有使用$ on - oops。

添加了代碼安裝（）部分，現在它工作：

const order = { 
    template: ` 
     ...// table content 
     <td><button class="btn btn-default btn-sm" @click="assignAdvisor(id, 
             selectedOption)">Set Advisor</button></td> 
    `, 

    methods: { 
     // following is the method that is run when the button is pressed 

     assignAdvisor(id, selectedOption) { 
      axios.post('url').then(response => { 
       ..// show response message 
       orders.$emit('refreshAfterUpdate'); // also tried 
                // this.$parent.$emit(...) 
      })  
    }, 
}; 

const orders = { 
    components: { order, }, 

    props: { 
     orders: { 
      type: Object, 
     }, 
    }, 

    mounted() { 
     // this is basically the code that I need to re-run when button is pressed, 
     // which I have repeated below in a method 
     var refresh =() => { 
      axios.get('/admin/ajax/unassigned-orders') 
       .then(response => { 
       this.ordersData = response.data; 
       setTimeout(refresh, 5000); 
      }); 
     } 
     refresh(); 

      $this.on('refreshAfterUpdate',() => { 
       axios.get('/admin/ajax/unassigned-orders') 
       .then(response => { 
       this.ordersData = response.data; 
       console.log(response); 
       }); 
      }, 
     }, 
    }, 


}; 

new Vue({ 
    render(createElement) { 
     const props = { 
      orders: { 
       type: Object, 
      }, 
     }; 
     return createElement(orders, { props }); 
    }, 
}).$mount('#unassignedOrders');