vue3.0 组件传参

1，父到子 props

父组件

子组件

解析

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

子组件使用props接收  list

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

2.子到父     context.emit(）

子组件

context.emit("send", 666);

父组件

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

使用ref 

父组件 

 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 组件交互

父

子

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
    };
  },
};