您现在的位置是:首页 > Javascript
当前栏目
vue3 setup中父组件通过Ref调用子组件的方法
2023-03-31 10:41:57 时间
在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
将方法暴露给父组件。
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件