父子组件中定义的方法相互调用

父子组件中定义的方法相互调用

1、子组件调用父组件中定义的方法

子组件代码

<template>
	<div>
		<button @click="clickCloseHandle()">点我关闭子组件弹窗</button>
	<div>
</template>
export default {
  methods: {
    clickCloseHandle() {
     this.$emit('closeHandle')
    },
    testHandle(){
   	 alert(2)
    }
  }
}

例子中使用 this.$emit(‘XXX’) 父组件中使用@XXX=“closeHandle()”@后面的键值与子组件emit定义的值一致，值为父组件中定义的方法，即可完成调用

父组件调用子组件中定义的方法

父组件代码

<template>
	<div>
		<child-component ref="childComponent" @closeHandle="closeHandle()"></child-component>
		<div @click="ceshiHandle()"></div>
	<div>
</template>
export default {
  methods: {
    closeHandle() {
     alert(1)
    },
    ceshiHandle(){
     this.$refs.childComponent.testHandle()
    }
  }
}

例子中使用 this.$$refs.childComponent.testHandle()父组件中使用ref="childComponent"定义子组件元素，使用this.$refs.childComponent.testHandle() 来调用子组件中定义的函数testHandle()