vue3 如何通过父组件操作【数组】控制子组件？

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

vue3 如何通过父组件操作【数组】控制子组件？

目前用父组件调用了子组件，传递参数 buttonData

<bottomNavigation :buttonData="buttonData"></bottomNavigation>

buttonData 数据结构为

const buttonData:Array<BarButton> = [
    {
        name: NameEnum.BUTTON1,
        showName:"按钮1",
        clickFunction: () => {
            console.log("Btn pushed");
        },
        showType: ShowTypeEnum.normal
    }, {
        name:  NameEnum.BUTTON2,
        showName: "按钮2",
        clickFunction: () => {
            console.log("Btn pushed");
        },
        showType: ShowTypeEnum.normal
    }
];

在子组件中， html 元素根据上文数组的内容进行渲染。

  <div class="bar-content">
    <div class="navigation-btn navigation-btn-normal" @click="item.clickFunction" v-for="(item, index) in buttons"
         :key="index">
      {{ item.showName }}
    </div>
  </div>

现在的问题是，我想通过父组件操作 buttonData ，来控制子组件的内容，但是目前无论怎么操作数组，子组件都不会改变。已验证 props 的数据和 ref 的数据改变了，只是视图没有重新渲染。
以下是子组件尝试通过监听处理 props 的代码：

  setup(props) {
    const buttons = computed(()=> {
      return props.buttonData as Array<BarButton>
    })
    watch(toRefs(props.buttonData as Array<BarButton>),(val)=>{
      console.log("watching",val)
    },{deep:true,immediate:true})
    return {
      buttons
    }
  }

如果问题描述不清，可以直接查看 github 上的源码：
https://github.com/nullpointe...

回答：

一开始钻牛角尖了，要操作 reactive 对象才能监听，所以传一个普通对象当 props 就不对，直接在外部就把对象用 reactive 包好传进去就是了。

回答：

你的数据没有用reactive处理是它怎么监听呢

以上是 vue3 如何通过父组件操作【数组】控制子组件？ 的全部内容， 来源链接： utcz.com/p/935693.html

回到顶部