vue3 调用子组件的方法

这篇具有很好参考价值的文章主要介绍了vue3 调用子组件的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

child.vue

<template>

</template>
<script setup>
const DoSomeThing = () => {
    alert('点击事件');
}

// 输出组件的方法,让外部组件可以调用
defineExpose({
    DoSomeThing,
})


</script>
<style lang="less" scoped>

</style>

parent.vue文章来源地址https://www.toymoban.com/news/detail-620366.html

<template>
    <childVue ref="child" />

    <a-button type="primary" @click="ChildEvent">调用子组件的方法</a-button>
</template>
<script setup>
// setup 模式下,直接引用 Vue 文件,则相当于在组件中,注册了子组件
import { onMounted, ref } from 'vue';
import childVue from './child.vue';

// 创建于子组件同名的 变量名,则相当于获取了这个组件的实例
// 注意 : setup 模式下,不要让 子组件上的 ref 值 与创建的变量值重名😓
const child = ref();

// 子组件实例只有 在组件被挂载之后才能被调用
onMounted(() => {
    console.log(child.value);
})

const ChildEvent = () => {
    child.value.DoSomeThing();
}



</script>

<style lang="less" scoped>

</style>

到了这里,关于vue3 调用子组件的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue.js兄弟组件方法调用b组件调用a组件方法

    vue.js 中兄弟组件方法调用 场景:父组件中同时引入两个子组件(A和B),此时B组件点击按钮需要调用A组件里面的方法 方案1:vue的事件总线 方案2:自定义事件($emit) 最终方案:方案2 具体操作 B组件上添加一个自定义的事件,这个是B组件传递给父组件的 @getList=getlist A组件

    2024年02月13日
    浏览(42)
  • vue3父子组件相互调用方法详解

    在vue3项目开发中,我们常常会遇到父子组件相互调用的场景,下面以setup语法糖格式详细聊聊父子组件那些事儿。

    2024年02月11日
    浏览(42)
  • vue3父组件使用ref调用子组件方法

    在vue2中,父组件通过ref调用子组件的方法只需要给子组件添加ref属性,然后使用this.$refs.XXX.method即可 但是在vue3中,子组件需先使用defineExpose将方法暴露给父组件 调用方法如下: 1、使用getCurrentInstance 2、使用ref函数创建一个响应式的引用,并将其绑定到子组件上

    2024年01月16日
    浏览(47)
  • 在Vue3中,父组件调用子组件中的方法

    前言: 最近在写一个项目的过程中,遇到了父组件需要调用子组件中方法的情况,最终找到了实现方法,总结如下: 1.在子组件中定义方法并暴露出去 2.在父组件中获取子组件并调用子组件中的方法

    2024年02月19日
    浏览(42)
  • vue3.0 父组件调用子组件方法及获取子组件的值

    通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样的这里我详细的讲解一下他的调用方式及获取方法 1.第一步需要我们在父组件中定义一个方法 当我们点击这个方法的时候去调用子组件的方法 代码

    2024年02月14日
    浏览(27)
  • React、Vue3中父组件如何调用子组件内部的方法

    当父组件需要调用子组件的方法时,可以通过useImperativeHandle钩子函数实现。以下例子是ts实现方式。 在子组件中使用 useImperativeHandle 钩子,将指定的方法暴露给父组件,以便父组件可以通过子组件的引用来调用该方法。 在子组件中使用了 useImperativeHandle 钩子将 someMethod 方法

    2024年02月16日
    浏览(35)
  • 【JavaScript】数组方法 (ES6)

    arr.find(callback) 用于获取第 1 个符合要求的元素: callback : (item, index, arr) = boolean item -当前值、 index -当前索引、 arr -当前数组 返回值: callback 第一次返回 true 的对应 item ;如果没有符合的元素,则返回 undefined arr.findIndex(callback) 用于获取第 1 个符合要求的元素的下标: cal

    2024年02月14日
    浏览(57)
  • vue3.0子组件接收父组件的值以及调用父组件的方法

    html: 使用 v-bind即 :xxx=\\\"变量/方法\\\"向子组件传递值或者方法,下面定义变量id和变量setIds,将searchForm.id的值和setIds方法传到子组件中去 js: js: 先通过props进行接收父组件传来的值,然后再在setup里面使用第一个参数props,可以拿到父组件所有的变量以及方法 html:

    2024年02月17日
    浏览(40)
  • 【ES6】JavaScript 中的数组方法reduce

    reduce() 是一个 JavaScript 中的数组方法,它会对数组的每个元素执行一个提供的 reducer 函数,将其减少到一个单一的值。 这是 reduce() 的基本用法: 这里: callback 是一个用于每个数组元素的函数,接受四个参数: accumulator:累加器累加回调的返回值。它是上一次调用回调时返回

    2024年02月10日
    浏览(32)
  • Vue3 —— 在vue中动态引入组件以及动态引入js的方法

    文章目录 一 、 动态引入组件 1. 具体写法 二、 动态引入js文件 1. 具体写法 总结 定义一个异步组件,它在运行时是懒加载的。参数可以是一个异步加载函数,或是对加载行为进行更具体定制的一个选项对象。 在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时

    2024年02月12日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包