vue3实战中关于 props 的一个细节问题

  • Z时代
  • 2024-03-07
  • 分类：IT

这是一个关于父子组件通过 props 传递 reactive 函数包装的一个值的一个问题
父组件及对应的模板

import { reactive } from 'vue'
import TreeMenu from './TreeMenu.vue'
const userInfo = reactive({
   // 省略其他参数
  userMenu: [], // 该用户菜单列表
})
const getMenuList = async () => { // 获取所有菜单列表
  const list = await api.getMenuList({
    userName: userInfo.userName, 
    userPwd: userInfo.userPwd
  })
  userInfo.userMenu = list
}
getMenuList()
<TreeMenu :userMenu="userInfo.userMenu"/>

子组件

const props = defineProps({
  userMenu: {
    type: Array,
    default() {
      return []
    }
  }
})
console.log(props) // 该对象中的 userName 总是有值
console.log(props.userMenu) // 该对象始终是一个空数据

控制台中的结果（这个结果是我肉眼观察了5+以上，我不理解为什么会出现这种现象）
vue3实战中关于 props 的一个细节问题

回答：

因为 defineProps 只是一个语法糖，并不是一个真实存在的函数，它的作用在于告诉 vue 运行时工具，这里我们要引入一个变量。所以不能用普通变量的方式去看待它。

所以你不能当它是个普通函数那样，期待在后面 console.log() 就能拿到你想要的值，因为它编译后不一定是什么样的执行顺序。至于你用 console.log(props) 有值而 console.log(props.userMenu) 没值，则基本是由于 console.log 出来的是对象指针，而不是对象快照，等你展开的时候，前者已经有值了，后者则还指向默认值的结果（default()）所以是空的。

如果你需要单独使用 userMenu，可以用 const {userMenu} = toRefs(props)。因为 vue 是响应式的 MVVM 框架，所以任何时刻填充数据都可以渲染出正确的页面。

以上是 vue3实战中关于 props 的一个细节问题 的全部内容， 来源链接： utcz.com/p/937201.html

回到顶部