1. 程式人生 > >vue 父元件呼叫子元件的方法

vue 父元件呼叫子元件的方法

一般情況,我們從父元件向子元件傳遞資料會用props,子元件事件想在父元件中執行可以用$emit。

現在父元件想用子元件裡的一個方法,那怎麼辦?在父元件裡首先得得到子元件物件,點的方式就可以使用子元件方法了,那如何得到子元件物件,必須用ref,簡單例子如下:

<-- 子元件Food -->
methods: {
      toggleFood () {
	   this.showFood = ! this.showFood; 
      }
}
<-- 父元件Goods -->
<template>
      .....
      <Food ref='food'/>
</template>

<script>
      export default {
           methods: {
                showFood () {
                    this.$refs.food.toggleFood  // 呼叫子元件裡的toggleFood方法 
                }
           }
      }
</script>