vue3子组件给父组件传参,父组件给子组件传参,在父组件中直接调用子组件中的某个方法

vue3子组件给父组件传参,父组件给子组件传参,在父组件中直接调用子组件中的某个方法
1、子传父,以传递id为例

子:

const emit = defineEmits(['passId']);

//在需要传递的参数的地方写 , id为需要传递的参数

emit('passId', id);

 父:

//引入子组件
const SonPage= defineAsyncComponent(() => import('./sonpage.vue'));
//在DOM元素中引入子组件
<son-page  @passId="getId" />
//在script中写getId方法

const getId= (id: string) => {

         console.log("id",id)  //打印的值就是传递的id

};

2、父传子,以传递一个数组为例

父:

//引入子组件
const SonPage= defineAsyncComponent(() => import('./sonpage.vue'));

//定义一个传递给父组件的数组,以studentList 为例
const studentList = [{name:"张三",age:18},{name:"李四",age:20}]
//在DOM元素中传递
<son-page  :list="studentList ">

 子:

const props = defineProps({

 list: {

    type: Array, //数组类型

    default: '[]',  //默认空数组

  })

//定义一个变量接传递过来的list
const arrlist= ref(props.list);
console.log("arrList",arrlist)  //打印的就是传递过来的数组

 3、在父组件中调取子组件的某一个方法
子:

//父组件中将会调取的这个方法,id是父组件中的id,不用传递给子组件,直接将id作为参数调取子组件的方法
const getData= (id:string)=>{

//里面的方法自定义,我这里写了一个调取列表的数据的方法,getlist是一个获取列表的接口

  getlist(id).then((res: any) => {

        let List = res.data

   })

}
//在script中奖这个方法暴露

defineExpose({

  getData,

});

父:

//引入子组件
const SonPage= defineAsyncComponent(() => import('./sonpage.vue'));

const sonpageRef  = ref()

//DOM行间
<son-page ref = "sonpageRef">

①//在script中的某个方法里面调取这个方法
const openmedth = (userid)=>{
  sonpageRef.value.getData(userid)
}
②//在DOM行写,点击某个按钮时直接调取这个方法,注意这个id可以是script中已经定义的,也可以是for循环中遍历的

<el-button  @click="sonpageRef.openDialog(id)"  >获取列表</el-button>
注:子组件中的方法不需要参数时可以写参数,父组件调取子组件的方法时也不用填写参数

  • 9
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值