props传值后失去响应性

来源:7-6 使用vuex action 发送异步请求

qq_临__cfgIL

2021-11-10

老师,我习惯把实现不同功能的代码分开实现,但是发现props会失去响应性,而且还需要重新定义接口,没找到解决办法,请问可以怎么改?
图片描述

写回答

1回答

张轩

2021-11-11

同学你好 这里的原因就是 props整体是个响应式对象,而单独拿出来一个不是响应式,所以你这里等于传入了一个普通数组,自然会没有作用。

我提供几个解决思路,你可以自己去试试。

1 传入 props,最简单最直接,但是对于函数的语义性不是特别好
2 改变方法的思路,不使用响应性,而是只关注在给 column 添加avatar 属性这件事情上,比如
return props.list.map(column => {
    addColumnAvatar(column, 50, 50)
    return column
})
可以参见我的源代码
3 创建一个 ref,针对数组,然后使用它完成你的方法,当然还需要 watch props 的改变来更新它
const listRef = ref(props.columnListProps)
const { columnList } = useCheckHeadImgEffect(listRef)
watch(() => props.columnListProps, () => {
 // 更新
})


0
1
qq_临__cfgIL
非常感谢!
2021-11-11
共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程