vue3 setup中父组件通过Ref调用子组件的方法(实例代码)
目录
- 在setup()钩子函数中调用
- 在<srcipt setup>中调用
在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>
我是子组件
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const isChildren = () => {
console.log("我是子组件");
}
return {
isChildren,
}
}
})
</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调用子组件的方法的文章就介绍到这了,更多相关vue3 setup父组件调用子组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue3.0实践之写tsx语法实例
目录 测试tsx 新建一个App.tsx页面 tsx使用v-model指令 (App.tsx组件) 使用v-show.与三目运算符 tsx之数组的遍历(map) 自定义属性 data-index tsx绑定事件 tsx之 props父组件向子组件传递参数 App.vue 父 App.tsx 子 tsx之子组件 向父组件 传递数据 子组件 App.tsx App.vue 父 总结 00:下载 yarn add @vitejs/plugin-vue-jsx -D 01:引入 vite.config.
-
vue3+vite使用jsx和tsx详情
目录 安装@vitejs/plugin-vue-jsx 配置vite.config.js 使用实战 第一种写法使用this 第二种写法 第三种写法 安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default def
-
TSX常见简单入门用法之Vue3+Vite
目录 1.安装tsx 1.安装tsx插件 2.vite.config.ts里的配置 3.tsconfig.json里的配置 2.使用TSX 1.app.vue里的代码 2.app.tsx的代码 注意: 总结 1.安装tsx 1.安装tsx插件 npm install @vitejs/plugin-vue-jsx -D 2.vite.config.ts里的配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-v
-
Vue3+ts+setup getCurrentInstance使用时遇到的问题以及解决办法
目录 环境 问题描述 问题解决 补充:Vue3 getCurrentInstance与ts结合使用的坑 一.关于在ts中使用到类型定义错误问题 二.不能使用getCurrentInstance的ctx 总结 环境 vscodetypescript4vue3 问题描述 首先,vue3中的全局变量及方法的配置较vue2中的变化大家应该已经知道了,不清楚的可以查看官方说明,但是按照官方文档结合typescript使用时遇到了问题: axios.ts // axios.ts import axios f
-
详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)
在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法. <template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { com
-
使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例
目录 前言: vue3官方提供的方法 1.引入方法 2.定义变量,接到我们的方法 3.main.js中定义我们的全局变量 4.页面中使用我们的全局变量 vue3+ts 使用官方方法遇到的问题: 最终我解决问题的方法: 补充:Vue3 getCurrentInstance与ts结合使用的问题 总结 前言: vue3的 setup中是获取不到this的,为此官方提供了特殊的方法,让我们可以使用this,达到我们获取全局变量的目的,但是在使用typescript的时候,就会有一些新的问题产生,这里来做
-
如何在vue3中同时使用tsx与setup语法糖
目录 前言 Tsx与setup语法糖的优势 遇到的问题 最后 前言 想这样做的原因是在vue3里使用tsx开发时,props的声明显得异常麻烦,不禁想到defineProps的便利,但同时在vue3里tsx文件里tsx语法的书写必须在setup函数或者render函数里,无法正常的使用defineProps等一系列的宏.为了能够更加便利,使用了下文的方法. Tsx与setup语法糖的优势 目前,在vue3中使用tsx已经越来越流行且便捷,对于webpack与vite构建的项目,都有很好的插件支持
-
Vue3中setup方法的用法详解
目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l
-
vue3 setup中父组件通过Ref调用子组件的方法(实例代码)
目录 在setup()钩子函数中调用 在<srcipt setup>中调用 在setup()钩子函数中调用 父组件 <template> <div> 我是父组件 <children ref="childrenRef" /> <button @click="handleChildren">触发子组件</button> </div> </template> <scrip
-
Java编程实现调用com操作Word方法实例代码
实例代码如下: import com.jacob.activeX.ActiveXComponent; import com.jacob.com.Dispatch; import com.jacob.com.Variant; /** * jacob操作MSword类 * @author */ public class WordBean { // word文档 private Dispatch doc; // word运行程序对象 private ActiveXComponent word; //
-
Vue3中使用setup通过ref获取子组件的属性
目录 setup通过ref获取子组件的属性 调用子组件的属性和方法 setup通过ref获取子组件的属性 主要依赖defineExpose 子组件通过 defineExpose将数据抛出 <template> <div class="test-com">testCom</div> </template> <script setup lang="ts"> import { ref } from 'vue'
-
vue父组件调用子组件方法报错问题及解决
目录 vue父组件调用子组件方法报错 vue父组件调用子组件方法及遇到的问题 vue父组件调用子组件方法报错 在父组件定义了一个tab标签页,每一个标签页下面都调用不同的组件, 如下图所示: 子组件中定义的方法: setup() { const getList = () =>{ const date = moment(new Date()).format('YYYY-MM') loading.value = true apiGetPageList({ salaryDate: date, page
-
Vue父组件调用子组件函数实现
Vue父组件调用子组件的函数 父组件通过事件调用子组件的函数.例如父组件通过 点击事件 让子组件发请求. 文章中的项目已经通过脚手架去创建. DEMO: Father.js <template> <div> <div> <son ref="son"></son> <input type="button" value="点击" @click="useSonFun"
-
vue 使用ref 让父组件调用子组件的方法
父级组件上的三个按钮可以 调用子组件loading的三个方法,执行不同的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app&qu
-
Vue子组件向父组件通信与父组件调用子组件中的方法
子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件
-
vue 父组件中调用子组件函数的方法
在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt
-
React父组件调用子组件中的方法实例详解
目录 Class组件 1. 自定义事件 2. 使用 React.createRef() 3. 使用回调Refs Function组件 补充:子组件调用父组件方法 总结 文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式,并未涵盖 ref 的所有应用方式! Class组件 1. 自定义事件 Parent.js import React, { Component } from 'react'; import Child from './Child'; class Parent exte