当前位置:首页 > 说编程 > 正文内容

vue3-子组件调用父组件-父组件调用子组件-setup语法糖

2023-06-17说编程2903

1、父组件调用子组件函数

父组件调用子组件的函数和方法主要通过defineExpose来实现。

//父组件
<template>
  <childComponent ref="childRef"></childComponent>
</template>

<script setup>
import childComponent from './components/childComponent.vue'
const childRef = ref()
childRef.value.clickChild()
</script>

子组件通过defineExpose暴露

//子组件
<template>
  <div @click="clickChild"><div>
</template>

<script setup>
import {defineExpose} from 'vue'
defineExpose({  clickChild })
function clickChild(){
  console.log('hello child')
}
</script>

2、子组件调用父组件函数

父组件通过定义函数以及将函数通过@属性=“函数”,将函数传入子组件中

//父组件
<template>
  <childComponent ref="childRef"  @callParent="getData"></childComponent>
</template>

<script setup>
import childComponent from './components/childComponent.vue'
function getData(){
  console.log('hello parent')
}
</script>

在子组件中,通过defineEmits来接受父组件绑定在子组件的属性名,即为refresh,再通过emit来调用函数,defineEmits可用与函数数组,即传入多个函数。

//子组件
<template>
  <div @click="clickChild"><div>
</template>

<script setup>
import {defineEmits} from 'vue'
const emit = defineEmits(['callParent'])
function clickChild(){
  emit('callParent')
}
</script>


扫描二维码推送至手机访问。

本站内容仅供学习研究,转载请以链接形式注明,如有侵犯请联系处理。

本文链接:https://suyu.net/post/128.html

分享给朋友:

发表评论

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。