vue3.0子组件接收父组件的值以及调用父组件的方法

父组件使用子组件，并向子组件中传值和方法

html:
使用 v-bind即 :xxx="变量/方法"向子组件传递值或者方法,下面定义变量id和变量setIds，将searchForm.id的值和setIds方法传到子组件中去

<template>
	<ExpertsConfiguration 
	   :id="searchForm.id" 
	   :setIds="setIds"
	 ></ExpertsConfiguration>
 </template>

js:

import { ref,reactive,onMounted,onBeforeUnmount } from 'vue';
import ExpertsConfiguration from "../ExpertsConfiguration/ExpertsConfiguration.vue" //引用子组件
export default {
    name: "GetMyTaskWaitingPageList",
    setup() {
    	let searchForm = reactive({
            id: 1,
        })
        const setIds= () => {
			searchForm.id = 666
        }
         onMounted(() => {})
        return {
        	searchForm ,
        	setIds
        }
    },
    components: {
        ExpertsConfiguration,
    }
}

子组件接收父组件的值以及调用父组件的方法

js:
先通过props进行接收父组件传来的值，然后再在setup里面使用第一个参数props，可以拿到父组件所有的变量以及方法

import { ref,reactive,onMounted,onBeforeUnmount } from 'vue';
export default {
    nname: "ExpertsConfiguration",
    setup(props, context) {
    	//接收父组件传来的id
        let listId = ref("");
        listId.value = props.id
        const getIds= () => {
        	//props可以拿到父组件所有的变量以及方法
			if(props.setIds){
               props.setIds();//直接调用父组件方法即可
            }
        }
        onMounted(() => {})
        return {
        	listId,
        	getIds
        }
    },
    props: { //接收子组件传值
        id: Number | String,
        setIds: {
            type: Function,
            default: null
        }
    },
    components: {}
}

html:

<template>
	<div>
		{
   
   {listId}}
		<a-button type="primary" @click="getIds">点击</a-button> 
	</div>
</template>