vue3.0 组件传参

丰的传说

已于 2023-05-02 13:48:33 修改

阅读量1.4k

点赞数

分类专栏： vue3.0 从入门到精通文章标签： java 前端 servlet

于 2022-06-28 14:33:22 首次发布

本文链接：https://blog.csdn.net/qq_42389674/article/details/125500371

版权

vue3.0 从入门到精通专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue中父子组件的通信方式，包括props从父到子传递数据，以及通过`$emit`从子到父传递信息。还提到了使用`ref`来访问子组件属性和方法，以及`v-model`在组件间的双向数据绑定。此外，还讨论了如何利用mitt库实现兄弟组件间的通信，并提供了详细的代码示例。

摘要由CSDN通过智能技术生成

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
    },
     modelValue:string
  },
  emits:['update:modelValue']
  setup(props, context) {
    let computedText = computed(()=>{
        get(){
            return props.modelValue
        },
        set(value){
            context.emit("update:modelValue",value)
        }
    })
    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)
})