在setup()钩子函数中调用

父组件

<template><div>我是父组件<children ref="childrenRef" /><button @click="handleChildren">触发子组件</button></div>
</template><script lang="ts">import { ref, defineComponent } from 'vue'import Children from './components/Children.vue';export default defineComponent({components: { Children }setup() {// ref的泛型除了指定any外 还可以指定<InstanceType<typeof Children>>const childrenRef = ref<any>();const handleChildren = () => childrenRef.value.isChildren();return {childrenRef,handleChildren}},})
</script>

子组件：

<template>
<div>我是子组件
</div>
</template><script lang="ts">import { defineComponent } from 'vue'export default defineComponent({setup() {const isChildren = () => {console.log("我是子组件");}return {isChildren,}}})
</script>

如果是在setup()钩子函数中使用，父组件通过ref获取到子组件实例后，直接.value.函数名即可调用子组件所定义的函数。其中ref的泛型可以指定any和InstanceType<typeof Children>

在<srcipt setup>中调用

父组件

<template><div>我是父组件<children ref="childrenRef" /><button @click="handleChildren1">触发子组件1</button><button @click="handleChildren2">触发子组件2</button></div>
</template><script setup lang="ts">import { ref } from 'vue'import Children from './components/Children.vue';const childrenRef = ref<InstanceType<typeof Children>>();const handleChildren1 = () => childrenRef.value?.isChildren();const handleChildren2 = () => childrenRef.value?.isChildren2();
</script>

子组件

<template><div>我是子组件</div>
</template><script setup lang="ts">import { defineExpose } from 'vue';const isChildren = () => {console.log("我是子组件的第一个方法");}const isChildren2 = () => {console.log("我是子组件的第二个方法");}defineExpose({ isChildren, isChildren2 })
</script>

在<srcipt setup>中调用和setup()钩子函数中调用不同的是：子组件中要通过defineExpose将方法暴露给父组件。

vue3 setup中父组件通过Ref调用子组件的方法相关推荐

Angular中父组件通过ViewChild调用子组件的方法
场景 Angualr中通过原生js和ViewChild的方式获取dom: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10586 ...
vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header" 2. 在父组件中通过this.$refs.header.属性,调用子组件的属性 ...
Vue中父组件调用子组件的方法
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
支付宝小程序组件传参,父组件调用子组件方法ref
组件传参子组件中 //js中声明 Component({props: {title: "标题", // 支付宝小程序props变量传参不能传对象,设置类型,只能传字符串onCon ...
react如何在父组件中调用子组件事件
父组件是如何使用子组件的事件的,下边数值累加的例子类组件将子组件的this传到父组件,给父组件添加一个属性,值为this,之后就可以通过父组件的属性调用子组件的事件了 import React,{ ...
react 父组件调用子组件方法--通过 props 实现
父组件中 // 引入子组件 import GlobalTable from '../globalComponents/global-table'export default class Assuran ...
微信小程序父组件调用子组件方法
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...
VUE Element UI 父组件调用子组件方法变量，子组件使用父组件变量
一.父组件调用子组件的方法步骤拆解: (1)父组件:1.渲染调用子组件 2.导入子组件 3.声明子组件变量 4.调用子组件 (2)子组件:1.实现子组件自己的渲染.数据处理功能 2.使用父组件的变量 ...
vue父组件调用子组件方法
vue父组件调用子组件方法比如,父组件有一个弹窗组件,在子组件里定义自己的显示隐藏效果,父组件调用. 通过ref调用子组件的方法父组件代码 <template><div>/ ...

vue3 setup中父组件通过Ref调用子组件的方法

在setup()钩子函数中调用

在<srcipt setup>中调用

vue3 setup中父组件通过Ref调用子组件的方法相关推荐

最新文章

热门文章