Vue中父对自组件异步传值未收到或者错误问题

鱼在在

已于 2024-12-09 11:30:33 修改

阅读量615

点赞数 10

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2024-12-09 11:10:34 首次发布

本文链接：https://blog.csdn.net/weixin_72254790/article/details/144340832

正常情况的父子传值

子组件中通常需要调用父组件的数据，此时需要使用 vue3 的 props 进行父子组件通信传值。

如下：子组件接收父组件的MenuData数据来显示内容。

//父组件
<template>
  <HelloWorld :menuData="MenuData" /> //子组件
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      MenuData: ref([])
    }
  },
  methods: {
    /**
     * @return {Promise<Array>} 
     */
    async GetLevalMenu() {
      ...
    }
  },
 mounted() {
        
        // 获取异步数据
		this.GetLevalMenu().then(result=>{
			this.MenuData.value=result;
		});
		
  }
}
</script>

子组件接收数据并渲染。

// 自组件
export default {
  name: 'HelloWorld',
  props:{
	menuData:Array
  },
  data() {

    return{
        ...
    }
}
....

但是在子组件mounted中打印得到的是空内容，即父组件MenuData初始化数据——空[ ]。

解决办法

我认为异步获取的值都不要使用prop的方式获取其值，可以使用ref 获取组件的实例方法来获取值。

1.在组件上定义ref 用于获取Dom

<HelloWorld :menuData="MenuData" />
//更改为
<HelloWorld ref="Menu" />

2. 在mounted中获取数据后立刻引用组件实例方法对其赋值

mounted() {

		this.GetLevalMenu().then(result=>{
			this.MenuData.value=result;
		});
  }

//更改为

mounted() {

		this.GetLevalMenu().then(result=>{
            this.$refs.getMenuData(result);
		});
		
  }

3.在子组件中实现获取（getMenuData）方法

props:{
	menuData:Array
  },

//更改为下面

data{
  return{
    menuData:Array

    };

},
//子组件
methods:{
//... 其他方法

getMenuData(Menudata)

    this.menuData=Menudata;
//然后就可以靠这个响应式数据渲染组件啦！
}