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>
注：子组件中的方法不需要参数时可以写参数，父组件调取子组件的方法时也不用填写参数