当前位置: 首页 > 知识库问答 >
问题:

javascript - vue3组合式api+ts,props嵌套传递,直接绑定到元素上,是响应式的嘛?

裴俊豪
2024-01-05

vue3组合式api+ts,props嵌套传递,没有用变量接收,直接绑定到元素上,当祖父级数据更新,父级和子级都会跟随响应式变化嘛?
祖父级给父级组件绑定选中行的数据,如下:
image.png
父级组件直接将props.data绑定给子级组件,如下:
image.png
当祖父级数据更新,父级和子级都会跟随响应式变化嘛?
我知道当后代组件用变量接收props传递数据时,需要侦听props,才能响应式,这种直接props直接绑定到元素上传递的,会响应式变化嘛

共有3个答案

龙焱
2024-01-05

理解本身就有问题,并不是侦听 props,才能响应式

而是 props 内部是 reactive 实现的,本身是响应的,解构才会出现不响应的问题

莫名其妙的开发者喜欢用 watch 曲线救国

props 向下传递即可

image.png

程正阳
2024-01-05

子组件不用后代用,为什么不直接用provide/inject呢

苍元章
2024-01-05

在 Vue 3 的组合式 API 中,使用 TypeScript,当 props 被嵌套传递并且直接绑定到元素上时,它们是响应式的。这是 Vue 3 的默认行为,并且通过其响应式系统得以保证。

在你提供的例子中,当祖父级组件的数据发生变化时,父级和子级组件的 props 会自动更新,因为它们都是通过数据绑定直接连接的。Vue 的响应式系统会自动检测到数据的变化,并相应地更新所有依赖该数据的部分。

不过,值得注意的是,如果你希望在后代组件中更精细地控制响应式行为,例如只在某些特定条件下重新渲染组件,你可能需要使用 computed 属性或 watch 侦听器来手动处理这些逻辑。但在大多数情况下,简单的 props 嵌套传递和直接绑定是足够响应式的。

 类似资料:
  • 主要内容:setup 组件,实例(src/APP.vue),实例,Vue 组合式 API 生命周期钩子,实例,实例,实例,模板引用,实例,实例,实例,实例Vue3 组合式 API(Composition API) 主要用于在大型组件中提高代码逻辑的可复用性。 传统的组件随着业务复杂度越来越高,代码量会不断的加大,整个代码逻辑都不易阅读和理解。 Vue3 使用组合式 API 的地方为 setup。 在 setup 中,我们可以按逻辑关注点对部分代码进行分组,然后提取逻辑片段并与其他组件共享代码。因

  • 子组件 在expansion函数中可以直接修改父组件的值,vue也不会报警告,这是被允许的吗?为什么可以正常修改

  • 在vue3框架中,我使用ref定义了一个变量,但是发现在更新其数据之后,页面上并不会有响应式变化,具体表现是在更新数据之后不会出现表格最前面的选择框 数据定义 数据初始化,其中list是一个数组,具有唯一的id属性 组件A中定义了计算属性rowSelection 当点击一个按钮之后,触发BatchEdit函数,通过emit抛出新的rowSelection 在父组件中进行事件定义并更新内容 rowS

  • 主要内容:Vue.js class,class 属性绑定,实例 1,实例 2,实例 3,实例 4,实例 5,实例 6,,Vue.js style(内联样式),实例 7,实例 8,实例 9,组件上使用 class 属性,实例 10,实例 11Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时, 表达式除了可以使用字符串之外,还可以是对象或数组。 v-bi

  • 如题,定义一个组件,设置 props 如下: 当我直接定义 的时候,会提示这样会失去响应性 所以想问下,如何可以将这样的定义,转为响应性

  • 我定义了一个组合式函数useCompute: 在组件中我这样使用: 我想在nums的长度改变之后能让item也改变,但是好像不起作用,我在组件中可以监听到 form.data.nums 的变化,但是在useCompute我监听不到,只有初次渲染组件的时候会执行一次watch里的函数,我才接触vue3,还有很多地方不是很懂,有大神可以帮忙解答下吗?十分感谢!