vue2 有状态的父组件如何修改子组件的props并触发更新

  • Z时代
  • 2024-02-28
  • 分类：IT

vue2 有状态的父组件如何修改子组件的props并触发更新

首先这里的父组件和子组件并不是强耦合关系，子组件会是三方库的组件，比如是ant-design-vue的Table，父组件是我要写的，目的是能让使用者在无感知（不用写额外代码）的情况下实现父级修改子级的props

如果父组件是函数式组件的话，那么我可以通过修改vnode的propsData来实现目的，但是普通的有状态组件我就不会了

父组件：

<template>
  <div class="parent">
    <slot/>
  </div>
</template>
<script>
export default {
  name: 'Parent'
}
</script>

子组件：

<template>
  <div class="child">{{ text }}</div>
</template>
<script>
export default {
  name: 'Child',
  props: { text: String }
}
</script>

使用父组件时的代码（只要写这些，然后Parent就能在特定时机修改Child的text）：

<template>
  <parent>
    <child/>
  </parent>
</template>
<script>
import Parent from './Parent'
import Child from './Child'
export default {
  components: { Parent, Child }
}
</script>

回答：

给第三方组件绑定 v-bind="$attrs" 能满足你的需求吗?

以上是 vue2 有状态的父组件如何修改子组件的props并触发更新 的全部内容， 来源链接： utcz.com/p/936016.html

回到顶部