defineExpose

defineExpose可以将方法主动暴露出来

父组件

//通过ref
      <tree :show="show" 
      ref="treeRef">
      </tree>
// ref      
const treeRef = ref()
const handleClick = () => {
//获取ref中的子组件方法handleNodeClick()
 treeRef.value.handleNodeClick()
}

子组件


```javascript
import { ref defineExpose } from 'vue'
const handleNodeClick = () => {
 console.log('要执行的方法')
}
//将方法暴露出
defineExpose({ handleNodeClick})

defineEmits

父组件

//getGatewayData要获取的参数
<tree :show="show" 
@gatewayData="getGatewayData">
</tree>
//执行方法获取参数
const getGatewayData = (e) => {
  console.log('getGatewayData', e)
}

子组件

import { ref, defineEmits } from 'vue'
const emits = defineEmits(['handleNodeClick'])
const handleNodeClick = (e) => {
 emits('gatewayData', label.value)
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐