快捷導(dǎo)航

Vue父組件觸發(fā)子組件中的實(shí)現(xiàn)方法

更新時(shí)間：2025年01月30日 06:56:17 作者：孫悟空

文章總結(jié)：介紹了兩種實(shí)現(xiàn)父組件觸發(fā)子組件方法的常用方法：通過ref訪問子組件實(shí)例并調(diào)用方法,以及使用自定義事件觸發(fā)子組件方法

1 通過 ref 取得子組件實(shí)例并調(diào)用方法

父組件可以在模板中通過 ref 給子組件命名，然后在父組件中使用 $refs 訪問子組件實(shí)例的方法。

<!-- 父組件 -->
<template>
  <div>
    <button @click="callChildMethod">調(diào)用子組件方法</button>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
		this.$refs.child.childMethod();	//不傳參
		this.$refs.child.childMethodParam(param);	//可以直接向子組件傳遞參數(shù)param
    }
  }
}
</script>

在子組件中，需要在 methods 中定義要被調(diào)用的 childMethod 方法。

<!-- 子組件 -->
<template>
  <div>
    <!-- 組件內(nèi)容 -->
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('子組件方法被調(diào)用')
    },

	childMethodParam(param) {
     console.log('子組件方法被調(diào)用，并接收到父組件傳遞過來的參數(shù)：',param)
   }
  }
}
</script>

2 使用自定義事件

父組件可以在需要觸發(fā)子組件中的方法的時(shí)候，通過 $emit 觸發(fā)自定義事件。然后在子組件中監(jiān)聽該事件，在事件回調(diào)函數(shù)中執(zhí)行對應(yīng)的方法。

<!-- 父組件 -->
<template>
  <div>
    <button @click="callChildMethod">調(diào)用子組件方法</button>
    <child-component @custom-event="onCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$emit('custom-event')
    },
    onCustomEvent() {
      console.log('custom-event 事件被觸發(fā)')
    }
  }
}
</script>

在子組件中，需要通過 props 來接收父組件傳遞的自定義事件，并在 created 生命周期中對其進(jìn)行監(jiān)聽。

<!-- 子組件 -->
<template>
  <div>
    <!-- 組件內(nèi)容 -->
  </div>
</template>

<script>
export default {
  props: ['customEvent'],
  created() {
    this.$on('custom-event', this.childMethod)
  },
  methods: {
    childMethod() {
      console.log('子組件方法被調(diào)用')
    }
  }
}
</script>