Vue+TS 组件传值(列表为例,含接口调用)

最新推荐文章于 2024-05-27 18:51:00 发布

liberalhumblehopeful

最新推荐文章于 2024-05-27 18:51:00 发布

阅读量1.7k

点赞数 3

文章标签： vue.js typescript

本文链接：https://blog.csdn.net/fhrlhh/article/details/125145888

版权

1.进页面(父组件)调用函数

onMounted(() => {

// 钩子函数-进入页面触发

FindOrderList()

})

    onMounted(() => {
        // 钩子函数-进入页面触发
        FindOrderList()
    })

2.父组件接口调用拿到值

这里的请求已封装

state.orderList是我们最后要传给子组件的值

const FindOrderList = () => {

// 订单详情

const url = SERVER_INTERFACE.FindOrderList

request({ url, method: 'GET' }, state.list_form).then((res: any) => {

state.orderList = res.data.list

})

}

const FindOrderList = () => {
        // 订单详情
        const url = SERVER_INTERFACE.FindOrderList
        request({ url, method: 'GET' }, state.list_form).then((res: any) => {
                state.orderList = res.data.list
        })
    }

3.父组件传值

这里做了非空和空的区分,为了避免报错

{state.orderList.length !== 0 && <div>{state.serviceType === 0 ? <CarTable /> : <ResourcesTable list={state.orderList} />}</div>}

{state.orderList.length === 0 && <div>{state.serviceType === 0 ? <CarTable /> : <ResourcesTable list={[]} />}</div>}

{state.orderList.length !== 0 && <div>{state.serviceType === 0 ? <CarTable /> : <ResourcesTable list={state.orderList} />}</div>}
{state.orderList.length === 0 && <div>{state.serviceType === 0 ? <CarTable /> : <ResourcesTable list={[]} />}</div>}

4.子组件接收

用props接收,传的时候叫list,接的时候也要用list , 注意在TS中 , [ ] 的类型为Object , 所以list的类型要写Object , 同时在下面加了深度监听 , 如果涉及到父组件状态切换显示不同的数据,一定要加深度监听 , 不然会出现数据不刷新的情况.

 props: {
        list: Object,
    },
    setup: (props) => {
        let list: any = props.list
        watch(()=>props.list,(onValue)=>{
            console.log(321,onValue);
            list = onValue
        },{deep:true})
        console.log("子组件:",list)
    }

5.子组件传值

使用emit方法 , load 是名字 , 父组件接收的时候 , 名字要一致 , dialogVisibleData是要传的数据

emit('load', dialogVisibleData)

emit('load', dialogVisibleData)

6.父组件接收

onLoad代表触发的方法,如果子组件叫 load 父组件就是 onLoad , 子组件叫send 父组件就叫 onSend

 <Dialog dialogVisible={state.dialogVisible} onLoad={getChideData} />

 const getChideData = (dialogVisibleData: number) => {
        console.log('dialogVisibleData', dialogVisibleData)
        if (dialogVisibleData === 0) {
            state.dialogVisible = false
        } else {
            console.log('用户提交')
            state.dialogVisible = false
            submitOrder()
        }
    }