vue3.0 父组件调用子组件方法及获取子组件的值

通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异，但是思路还是一样的这里我详细的讲解一下他的调用方式及获取方法

1.第一步需要我们在父组件中定义一个方法当我们点击这个方法的时候去调用子组件的方法
代码如下

//父组件
<template><son ref="myRefs"></son><button @click="giveParentHandVal">向父组件传值</button>
</template>
<script setup lang="ts">
import son from '@/views/home/components/son.vue'
import {ref} from "vue"
//获取绑定的ref
const myRefs = ref();
const giveParentHandVal = () =>{//通过ref去调取子组件的change方法myRefs.value.change()//这里也可以通过ref获取到子组件暴露出来想要父组件获取到的值console.log(myRefs.value.age)}
</script>

2.第二步需要我们在子组件中定义这个方法并暴露出来这里用到了一个钩子函数defineExpose

//子组件
<script setup lang="ts">
import {defineExpose} from "vue"
const age = 20
//在子组件中定义change方法
const change = () => {alert(222)
}
//这里需要暴露出去不然父组件调用不到这个方法
defineExpose({change
})
</script >

vue3.0 父组件调用子组件方法及获取子组件的值相关推荐

android利用反射调用截屏api,Android利用反射机制调用截屏方法和获取屏幕宽高的方法...
想要在应用中进行截屏,可以直接调用 View 的 getDrawingCache 方法,但是这个方法截图的话是没有状态栏的,想要整屏截图就要自己来实现了. 还有一个方法可以调用系统隐藏的 screen ...
jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等...
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
vue3.0父传子，父传孙，子传孙，孙传父，孙传子的传值
1.父组件 <template><div class="Parent" ref="Parent"><el-button @clic ...
【Android 应用开发】自定义组件宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件
博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...
Python OOP：继承、单继承、多继承、__mro__、子类重写父类同名属性和方法、子类调用父类同名属性和方法、多层继承、super()、私有(实例)属性和方法、获取修改私有属性值、私有类属性
一.继承 Python⾯向对象的继承指的是多个类之间的所属关系,即⼦类默认继承⽗类的所有属性和⽅法. 继承作用:继承可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展. 在P ...
js获取子元素，原生获取子元素
js原生获取子节点: 1.封装成公用方法,以便于复用. function deleteTextNode(id) {var _elem = document.getElementById(id),_ch ...
Home键的获取监听，安卓4.0后就不能在onkeydown方法中获取了。怎么办。
Android下得到Home键按下的消息在Android下,并不能通过onKeyDown这样的事件来截获Home键的消息,其原因在Android的文档中已经明确的说过了 public static ...
vue 父组件调用子组件方法ref
一.ref被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的$refs对象上 vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.metho ...
vue 父组件调子组件方法_vue父组件调用子组件有哪些方法
这次给大家带来vue父组件调用子组件有哪些方法,vue父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下. 情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组 ...

vue3.0 父组件调用子组件方法及获取子组件的值

vue3.0 父组件调用子组件方法及获取子组件的值

vue3.0 父组件调用子组件方法及获取子组件的值相关推荐

最新文章

热门文章