Bootstrap

【Vue甜点】vue实现父组件调用子组件内的方法

  1. 使用自定义事件:在子元素中定义一个自定义事件,当需要调用该方法时,通过触发该事件来传递给父元素。
    父元素可以通过监听该事件并调用相应的方法来响应。例如:
<!-- 子组件 -->  
<template>  
  <button @click="emitMethod">点击我</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    emitMethod() {  
      this.$emit('child-method');  
    }  
  }  
}  
</script>
<!-- 父组件 -->  
<template>  
  <child-component @child-method="parentMethod"></child-component>  
</template>  
  
<script>  
export default {  
  methods: {  
    parentMethod() {  
      // 父元素的方法逻辑  
    }  
  }  
}  
</script>
  1. 使用ref引用:在父元素中使用ref来引用子元素,并通过this.$refs来获取子元素的实例,从而可以直接调用子元素的方法。例如:
<!-- 子组件 -->  
<template>  
  <button @click="childMethod">点击我</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    childMethod() {  
      // 子元素的方法逻辑  
    }  
  }  
}  
</script>
<!-- 父组件 -->  
<template>  
  <child-component ref="childRef"></child-component>  
</template>  
  
<script>  
export default {  
  mounted() {  
    // 直接调用子元素的方法  
    this.$refs.childRef.childMethod();  
  }  
}  
</script>
;