[JavaScript知识库]vue3.0 组件传参

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

使用插件 mitt 实现兄弟组件的交互通信

安装 mitt插件

npm install mitt -s

定义 mitt.js文件

import mitt from 'mitt';
const emitter = mitt();
export default emitter;

兄弟组件A

import emitter from "@/utils/mitt.js"


//发射事件

emitter.$emit("sendInfo",1)

兄弟组件B

import emitter from "@/utils/mitt.js"


//接收事件

emitter.$on("sendInfo",(e)=>{
    console.log(e)
})