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