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

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

回到顶部