vue3父组件调用子组件的方法

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

东风vue3父组件调用子组件的方法是通过exposeref来实现的,我们可以通过expose来控制父组件可以访问子组件那些的方法和对象,我们将通过setup api(组合式 api)和option api(选项式 api)来演示父组件如何调用子组件的方法。

1,组合式API

父组件通过ref定义子组件实例,通过调用实例获得子组件的数据和方法

<!-- 父组件 app.vue -->
<template>
  <div class="itxst">
    <!-- 使用 ref  指令关联子组件 -->
    <child ref="childComp"/>
    <button @click="onTry">点击试一试</button>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import child from "./child.vue";
//定义子组件实例,名称要和上面的ref相同
const childComp = ref(null);

//访问demo组件的方法或对象
const onTry = () => {
  //获取到子组件的 title 数据 
  let msg = childComp.value.state.title;
  //调用子组件的 play方法
  childComp.value.play();
};
</script>

子组件通过defineExpose暴露对象和方法 

<!--子组件名称  child.vue -->
<template>
  <div class="itxst">
    {{ state.title }}
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
//定义一个变量
const state = reactive({
  title: "www.itxst.com",
});
//定义一个方法
const play = () => {
  state.title = "你调用了子组件的方法";
};

//暴露state和play方法
defineExpose({
  state,
  play,
});
</script>

2,选项式API文章来源地址https://www.toymoban.com/news/detail-510399.html

<!-- 父组件 app.vue -->
<template>
  <div class="itxst">
    <!-- 使用 ref  命令 -->
    <child ref="childComp"/>
    <button @click="onClick">点击试一试</button>
  </div>
</template>
<script >
import child from "./child.vue";
export default {
  name: "app",
  //注册组件
  components: {
    child,
  },
  methods: {
    onClick: function () {
      //获取到 子组件的  数据
      let msg = this.$refs.childComp.message;
      //执行了子组件的 play方法
      this.$refs.childComp.play();
    },
  },
};
</script> 
<!-- 子组件 child.vue -->
<template>
  <div class="itxst">
    {{ title }}
  </div>
</template>
<script>
//选项式默认当前实例是全部暴露
export default {
  name: "demo",
  //默认全部暴露 也可以通过expose控制那些需要暴露
  //expose: ['play'],
  data() {
    return {
      title: "www.itxst.com",
    };
  },
  methods: {
    play: function () {
      this.title = "你调用了子组件的方法";
    },
  },
};
</script>

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

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

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

相关文章

  • vue3父组件使用ref调用子组件方法

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

    2024年01月16日
    浏览(49)
  • vue中父组件直接调用子组件方法(通过ref)

    目录 1、vue2 中,父组件调用子组件的方法 2、vue3 中,父组件调用子组件的方法 在Vue 2中,父组件可以通过使用 ref 属性来引用子组件的实例,然后通过该实例调用子组件的方法。 首先,在父组件的模板中,给子组件添加一个 ref 属性: 然后,在父组件的JavaScript代码中,可以

    2024年04月27日
    浏览(37)
  • 在Vue3中,父组件调用子组件中的方法

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

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

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

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

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

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

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

    2024年02月17日
    浏览(40)
  • vue3 父组件与路由子组件相互调用

    Framework.vue中通过路由出口router-view/,展示了Main.vue组件,但是现在需要在Main.vue组件中去调用Framework.vue组件中的方法,可以有以下几种做法 可以使用provide/inject的机制 Framework.vue Main.vue 可以直接在router-view @kk=“kk”/绑定事件监听 Framework.vue Main.vue 可以使用router-view /的组件写

    2024年02月12日
    浏览(40)
  • 记录--封装一个通过js调用的全局vue组件

    在使用vue项目编写的时候,不可避免的会碰到需要时js api来调用组件进行显示的情况 例如饿了么element ui 的 Notification 通知、Message 消息提示等组件 虽然已经提供了,但是由于api的限制,我们只能通过特定的参数来有限的改变组件的样式 之前的文章说过可以使用 new Vue() 、

    2024年02月09日
    浏览(56)
  • VUE中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用

    场景:自定义一个通用组件,需要调用父组件的方法进行计算 一、使用this.$emit()向父组件触发一个事件,父组件监听这个事件即可。 父组件: 子组件: 二、直接在子组件中通过“this.$parent.event”来调用父组件的方法。 父组件: 子组件: 三、父组件把方法传入子组件中,在子

    2024年02月04日
    浏览(40)
  • vue.js兄弟组件方法调用b组件调用a组件方法

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

    2024年02月13日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包