1，父到子 props

父组件

<template>
  <h1>我是父组件传参</h1>
  <navItem :ref="(el) => (navFnEL = el)" :list="list" @send="getInfo"></navItem>
</template>

子组件

<script>
import { onMounted, reactive } from "vue";
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  setup(props, context) {
    const list = reactive(props.list);
    console.log("title", list);
 
    const toFather = () => {
      context.emit("send", 666);
    };
    const init = (e) => {
      console.log("父组件主动调用子组件", e);
    };
    onMounted(()=>{
        console.log("9999999999999")
    })
    return {
      list,
      toFather,
      init
    };
  },
};
</script>

解析

父组件 在子组件标签上使用 v-bind:list="list"

子组件使用props接收  list

然后在setup 里使用 props.list 拿到数据

2.子到父     context.emit(）

子组件

context.emit("send", 666);

父组件

  <navItem :ref="(el) => (navFnEL = el)" :list="list" @send="getInfo"></navItem>

 
    let getInfo = (e) => {
      console.log("获取数据", e);
    };

使用ref 

父组件 

  <navItem :ref="(el) => (navFnEL = el)" :list="list" @send="getInfo"></navItem>

 setup(props, context) {
const navFnEL = ref();
onMounted(() => {
      console.log("fnGetEl", fnGetEl.value);//子组件暴露的数据
      console.log("navFn", navFnEL);
    });
  return {
      navFnEL
    }; 
};
 
 },

子组件

setup(props, context) {
    const list = reactive(props.list);
    onMounted(()=>{
        console.log("9999999999999")
    })
    return {
      list  //父组件通过ref能够访问到的数据
    };
  },

注意了

1，绑定ref时需要这样使用

:ref="(el) => (navFnEL = el)"

对应    const navFnEL = ref();  navFnEL 能够拿到 所有的子组件返回的内容

并且需要return 返回 navFnEL

使用getCurrentInstance获取到父级的实例 调用父级的方法修改数据

子

import { getCurrentInstance} from "vue";
 
 const ctx = getCurrentInstance()
 
ctx.parent.setupState.getInfo(999999999)

父

 
    let getInfo = (e) => {
      console.log("获取数据", e);
    };

v-model 组件交互

父

 <navItem v-model:showFlag="show"></navItem>

子

export default {
  props: {
    showFlag:{
       type:Boolean,
       default:false 
    }
  },
  setup(props, context) {
    const toFather = () => {
        context.emit("update:showFlag",false)
    };
    onMounted(()=>{
        ctx.parent.setupState.getInfo(999999999)
    })
    return {
      toFather
    };
  },
};