vue3的父子组件传值

1、父传子

即子调用父级函数——子给父发申请,然后父组件批准,在子组件调用父级函数

子组件:
const emit = defineEmits(['register', 'success']);
emit('success');
父组件:
案例:
//子组件


//父组件

2、子传父

  方法一:暴露法,父级调用子级函数

vue3的父子组件传值_第1张图片

vue3的父子组件传值_第2张图片

案例一

//案例1:行内setup,子抛出函数后,父级接收定义后再调用

//子组件:


//父组件:

案例二

//案例2:setup()函数,直接调用子级函数

//子级,定义函数并抛出
export default {
    setup(props, context) { 
         async function openModal(val) {  //①--子定义函数
            checkStatus.value=val.checkStatus;
            trayTable.loading = true;
            show.value = true;
            goodsLotRow.value = val;
            let canSelectTrayList = await canSelectTrayListApi(goodsLotRow.value.goodsLotSn);
            trayTable.loading = false;
            }
        }
        return {
                openModal,  //②--子抛函数
            };
	}
}
//父级
//引入子级
//ref="TrayModalRef"  —— 父级引入的子组件实例化中写
    //②子组件实例化

方法二:子传值给父

子传值给父,父再用函数接了之后,调用子级的值(父级调用子级传参)

//子组件 -- 传值
//context.emit('参数名',值) 
context.emit('addTrayList', trayTableRef.value.getSelectedData());  //--①子传值

//父组件 -- 接收
  //@子组件的传的参数名='父级函数名'
  //function 父级函数(list) -- 调用值,list为子级具体传过来的值


                    
                    

你可能感兴趣的:(VUE3,前端,前端,javascript,vue.js)