vue父组件调用子组件方法报错问题及解决

目录
  • vue父组件调用子组件方法报错
  • vue父组件调用子组件方法及遇到的问题

vue父组件调用子组件方法报错

在父组件定义了一个tab标签页，每一个标签页下面都调用不同的组件，

如下图所示：

子组件中定义的方法：

setup() {
	const getList = () =>{
		const date = moment(new Date()).format('YYYY-MM')
		loading.value = true
		apiGetPageList({
                salaryDate: date,
                page: state.pagination.page,
                limit: state.pagination.limit,
                jobNo: state.formState.searchValue ? state.formState.searchValue : null
            }).then((res: any)=> {
                if (res.data.status == 200) {
                    state.dataSource = res.data.data.rows
                    state.pagination.total = res.data.data.total
                } else {
                    Message.error(res.data.message ? res.data.message : "获取数据失败")
                }
            }).finally(()=>{
                loading.value = false
            })
	}
	return {
		getList
	}

}

父组件中使用tab标签页的change方法，每次点击不同tab页的时候，都会调用该子组件的获取列表数据的接口。

一开始的思路是：在父组件中调用子组件的时候使用ref属性，通过ref拿到子组件的方法，然后在change方法中进行调用。但在实际开发中，却出现了问题，切换到tab页时，控制台会报错，如下所示：

这个是因为异步执行的原型，子组件还没渲染完就调用方法会出现这样的情况。在网上百度了下解决方法，只需要在子组件中定义的方法中加上this.$nextTick就可以解决。

这种方法的确可以，但我试了试另一种方法：在父组件中的change方法中加上nextTick，想验证下是否能够解决，结果是能够正常调用。

代码如下所示：

setup() {
	const changeTab = (active: any) => {
            switch (active) {
                case "2":
                    console.log(33333,areaWorkDay)
                    nextTick(()=>{
                        areaWorkDay.value.editTableData = {}
                        areaWorkDay.value.getPageList()
                        areaWorkDay.value.formRef.resetFields()
                    })
                    break;
                case "3":
                    console.log(111,monthSalaryRef)
                    // monthSalaryRef.value.$emit('getList')
                    nextTick(()=>{
                        monthSalaryRef.value.editTableData = {}
                        monthSalaryRef.value.getList()
                        monthSalaryRef.value.monthRef.resetFields()
                    })
                    break;
            }
        }
       	return {
       		changeTab
		}
}

这样也可以解决父组件调用子组件的时候，因为异步执行，子组件方法还没初始化完成，导致控制台报错的问题。

vue父组件调用子组件方法及遇到的问题

在子组件methods选项中定义方法method()，在父组件中引用子组件，并在子组件标签中定义ref=‘xxx’，使用this.$refs.xxx.method()调用子组件方法。

但chrome控制台报错该方法undifined，原因是因为使用ref调用子组件是调用的实例，但调用时该实例还未加载完，因此调用的方法undifined。

解决方法：在父组件中调用时，先加载完组件实例再调用方法：

this.$nextTick( () => {
    this.$refs.xxx.method()
} )

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue父组件和子组件之间数据传递和方法调用

    vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性. 父组件向子组件传值(子组件主动获取父组件的数据和方法) 父组件import引用子组件 使用子组件时在子组件上添加一个v-bind属性,并绑定上数据 在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据 把接收到的数据在子组件中使用 子组件向父组件传值(父组件主动获取子组件的数据和方法) 子组件中需要发出该自定义

  • Vue 通过this.$emit()方法子组件向父组件传值(步骤分享)

    目录 子组件使用this.$emit()向父组件传值 第一步 在父组件中引入子组件 第二步 子组件向父组件传值 子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder, }, 使用 <indexImport

  • vue3子组件如何修改父组件传过来的props数据

    目录 前言 1. 修改父组件普通数据 2. 修改父组件复杂数据(对象) 最后 前言 最近新项目用vue3搭建的,准备开始使用vue3的语法,从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法,以便于以后复习,也可能帮助到一些小伙伴. 1. 修改父组件普通数据 使用v-mode语法,代替了vue2.x的.sync修饰符 父组件用ref() 定义一个普通数据为响应式变量,例 var test = ref(‘parent’) 父组件用v-mode将数据绑定到子组件上 <ChildCompone

  • vue父组件异步传递props值,子组件接收不到解决方案

    目录 父组件异步请求数据之后传值给子组件,子组件接收不到 这里有两种解决思路 父组件传递props异步数据到子组件遇到的问题 状况一 案例二 父组件异步请求数据之后传值给子组件,子组件接收不到 贴上父组件代码图: 子组件代码图: 打印结果: 父组件异步请求数据回来在传到子组件,子组件无法接收,打印的依然是默认值. 这里有两种解决思路 第一种:子组件使用watch监听 但是watch监听也会有接收不到值的情况,因为要修改props的favoriteValue的值,favoriteValue接收不到

  • vue之父组件向子组件传值并改变子组件的样式

    问题描述:在做视频网站过程中发现每个视频的样式其实是大致相同的,所以就想着直接写个组件,但是又看不懂官网的传值,所以自己找了个视频看明白了. 想实现的效果: vue父组件向子组件传值具体实现代码: 父组件的代码: <!-- 注释的部分是之前没有用组件的代码 --> <!-- <ul class="videoList"> <li v-for="item in videoList" :key="item.id" c

  • Vue中子组件向父组件传值以及.sync修饰符详析

    目录 Vue中 常见的组件通信方式可分为三类 1. 之前的写法 2. .sync 修饰符 总结 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue中 provide.inject 详解及使用 Vue中 常见的组件通信方式可分为三类 父子通信 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($p

  • vue3.0 子组件如何修改父组件传递过来的值

    目录 子组件修改父组件传递过来的值 使用toRefs进行解决 子组件向父组件传值emit的使用注意事项 子组件的写法 父组件使用 子组件修改父组件传递过来的值 vue 的子组件 不是 不能直接更改父组件的值,需要将props 的值 给到子组件,后再修改, 否则:Unexpected mutation of “props” prop. vue3提供了一个解决:toRefs:https://v3.cn.vuejs.org/api/refs-api.html#torefs toRefs 非常有用,这样

  • 详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)

    在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法. <template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { com

  • 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父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { callMethod () { con

  • vue 父组件调用子组件方法及事件

    情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块: 设想思路:点击父组件中的按钮触发子组件中上传方法: 子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法 子组件中处理上传的方法: fileClick(index) { c

  • 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子组件向父组件通信与父组件调用子组件中的方法

    Vue子组件向父组件通信与父组件调用子组件中的方法

    子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件

  • Vue父组件调用子组件函数实现

    Vue父组件调用子组件函数实现

    Vue父组件调用子组件的函数 父组件通过事件调用子组件的函数.例如父组件通过 点击事件 让子组件发请求. 文章中的项目已经通过脚手架去创建. DEMO: Father.js <template> <div> <div> <son ref="son"></son> <input type="button" value="点击" @click="useSonFun"

  • 关于vue父组件调用子组件的方法

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素. 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子. 我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法 例: 子

  • Angular父组件调用子组件的方法

    理解组件 组件是一种特殊的指令,使用更简单的配置项来构建基于组件的应用程序架构 这样他能简单地写app,通过类似的web Component 或者angular2的样式. web Component 是一个规范.马上就要成为标准. 应用组件的优点: 比普通指令配置还简单 提供更好的默认设置和最好的实践 对基于组建的应用架构更优化. 对angular2的升级更平滑. 不用组建的情况: 对那些在 compile或者pre-link阶段要执行操作的指令,组件不能用,因为无法到达那个阶段. 如果你想定义

  • 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

随机推荐