vue3.2中setup语法糖父组件如何调用子组件中的方法

简介: vue3.2中setup语法糖父组件如何调用子组件中的方法

父组件如何调用子组件中的方法


父组件.vue
<template>
  <div>
    <aa ref="testRef"></aa>
    <el-button @click="fatherHandler">调用父组件中的方法</el-button>
  </div>
</template>
<script setup lang="ts">
import { reactive ,ref} from "vue";
import aa from '../components/ChaCao.vue'
const testRef=ref()
const fatherHandler=()=>{
    testRef.value.changeInfoApi({
        name:'白风夕',
        sex:'女'
    })
}
</script>


子组件.vue
<template>
  <div class="main">
       <h2>我是子组件</h2>
        <h2>姓名:{{info.name}}</h2>
      <h2>姓别:{{info.sex}}</h2>
  </div>
</template>
<script setup lang="ts">
import { reactive,defineExpose } from "vue";
let  info=reactive({
    name:'丰兰息',
    sex:'男'
})
// 改变组件的中的方法
const changeInfoApi=(mess:any)=>{
    info.name=mess.name
    info.sex=mess.sex
}
// 将这个方法暴露出去,这样父组件就可以使用了哈
defineExpose({
    changeInfoApi,
})
</script>


1425695-20220507220528754-876039451.gif

相关文章
|
2月前
|
JavaScript API
vue使用hook:声明周期来监听子组件的声明周期
本文介绍了如何在Vue中使用生命周期钩子来监听子组件的生命周期事件,包括在子组件内部监听和在父组件中监听子组件的生命周期钩子。
48 0
|
2月前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
230 58
|
1月前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
1月前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
2月前
|
JavaScript
Vue在子组件中判断父组件是否传来事件
本文介绍了在Vue中如何通过`vm.$listeners`对象来判断父组件是否传递了特定的事件给子组件,并展示了如何检查事件是否存在以及相应的处理方法。
192 0
Vue在子组件中判断父组件是否传来事件
|
3月前
|
JavaScript 前端开发 API
Vue3之script-setup 语法糖
本文介绍了Vue 3的`<script setup>`语法糖,通过示例代码演示了如何在组件中使用`<script setup>`以及相关的Vue 3 Composition API函数和特性,如响应式引用、生命周期钩子、CSS模块等,并展示了组件间的通信和样式应用。
36 0
Vue3之script-setup 语法糖
|
3月前
|
JavaScript 前端开发 API
Vue3 中 setup 语法糖做了哪些骚操作?
Vue3 中 setup 语法糖做了哪些骚操作?
|
4月前
|
JavaScript
|
5月前
|
JavaScript
解决vue3中不支持.sync语法糖
解决vue3中不支持.sync语法糖
442 3
|
4月前
|
JavaScript
vue 父组件修改子组件的样式——深度作用选择器 >>> 、 /deep/ 、 ::v-deep
vue 父组件修改子组件的样式——深度作用选择器 >>> 、 /deep/ 、 ::v-deep
186 0
下一篇
无影云桌面