VUE3.0 子向父传参,但是数据表格不更新,这个还要其它动作吗?
问题描述：
setup (props) {
const data = reactive({
searchResult: []
})
// 这是父组件中的 触发函数,(点击子组件的button 触发)
function receiveData (data) { // data是子组件传过来参数
data.searchResult = data
page.loading = false
console.log('##########父组件', data.searchResult) // 这里 有正常的数据
}
}
但问题来了, 在表格中,这个数据出不来,一头雾水
<el-table
ref='table'
:data="searchResult"
border
stripe
v-loading="loading"
element-loading-text="读取中...">
<el-table-column label="编 号" prop="id"/>
<el-table-column label="创建日期" prop="create_time"/>
</el-table>
答
函数形参data与外部data重名了
答
数据没返回不能用的，要return，另外receiveData也没被调用呀,另外把函数里边的参数改一改名字data1，免得跟reactive里边的一样。
import "onMounted,toRefs,reactive" from Vue;
setup (props) {
const data = reactive({
searchResult: []
})
// 这是父组件中的 触发函数,(点击子组件的button 触发)
function receiveData (data1) { // data1是子组件传过来参数 ，你这个data1是从哪儿来的
data.searchResult = data1
page.loading = false
console.log('##########父组件', data.searchResult) // 这里 有正常的数据
}
onMounted(()=>{
//在这里应该调用receiveData
receiveData(data1); //你这个data1参数是从哪儿拿的，没看到在代码里定义。
});
//要加这个
return {...toRefs(data),receiveData}
}