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

东风vue3父组件调用子组件的方法是通过expose和ref来实现的，我们可以通过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

<!-- 父组件 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父组件调用子组件的方法相关推荐

vue3 setup语法糖下父组件调用子组件的方法
vue3下,父组件调用子组件的方法,如果使用了<script setup> 这种写法,那么子组件方法需要采用defineExpose()进行修饰,才能被外界调用.上代码: 1.子组件 _p ...
【Vue3系列】父组件调用子组件的方法-子组件向父组件传值
一:父组件调用子组件的方法父组件 <template><div>父页面<son-com ref="sonRef"/><button @c ...
关于Vue3+ts父组件调用子组件方法
Vue3中通过ref进行元素绑定然后就可以获取到元素,这个不用多说,但是我们需要通过父组件调用子组件的时候还需要进行一定的配置参考:https://juejin.cn/post/7025985645 ...
vue3.0 父组件调用子组件方法及获取子组件的值
vue3.0 父组件调用子组件方法及获取子组件的值通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样 ...
Vue父组件调用子组件的方法并传参的两种方式（用$refs.refName.functionName、window.function）
如需了解儿子怎么控制老子的,传送门:https://s-z-q.blog.csdn.net/article/details/120094689 父组件father.vue <template&g ...
vue父组件调用子组件的方法
vue组件与组件通信有如下几种情况: 平行组件父组件与子组件子组件与父组件它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.v ...
Vue中父组件调用子组件的方法
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
【VUE实战问题记录】Vue 父组件调用子组件的使用方法
Vue前端项目父组件调用子组件的时候,调用方式如下: 父组件 <template><div><child ref="refChild">< ...

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

vue3父组件调用子组件的方法相关推荐

最新文章

热门文章