Vue3组件传参的几种方式——父子组件传参、子父组件传参、eventBus挂载原型

liuwenjie_

已于 2022-10-14 16:26:04 修改

阅读量2.1k

点赞数 2

分类专栏： Vue3 vue学习笔记 vue 文章标签： javascript vue.js 前端

于 2022-09-08 15:34:18 首次发布

本文链接：https://blog.youkuaiyun.com/liuwenjie_/article/details/126765354

版权

Vue3 同时被 3 个专栏收录

4 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

vue学习笔记

3 篇文章

订阅专栏

为什么使用组件传参？

组件传参在Vue框架使用中是重中之重，一个单页面组件往往因为体积过大而不易维护，这就需要分而治之。比如一个crud，往往把列表作为一个子组件。新增、编辑页作为一个子组件，分页作为一个子组件。所以组件传参是必不可少的一部分。

    Vue3新增了setup语法糖，编码更简便。所以使用语法糖以及TS与否，组件传参写法也有所不同。

<1>. 不使用语法糖和ts的组件传参：

1. 组件通信——父传子

父组件：

<template>
  <div>
    <hello-world :name="name" :money="money"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import { ref } from "vue";
export default {
  components: {
    HelloWorld
  },
  setup() {
    const name = ref("Jevin");
    const money = ref(0);
    return {
      name,
      money
    };
  }
};
</script>

子组件：子组件接收要先在props中声明，才能在setup中使用

<template>
  <div>
    {{ name }} <br />
    {{ money }} <br />
  </div>
</template>
<script>
export default {
  props: ["name", "money"],
  setup(props, context) {
    // props接收到传过来的参数在这里使用
    // context接收到传过来的方法在这里触发
    console.log("props", props.name);
  }
};
</script>

2. 子父组件通信

和Vue2相同，父组件定义，子组件触发。不同的是，不管是方法还是属性，子组件都要声明才能使用。

父组件：

<template>
  <div>
    <hello-world  :money="money" @getMoney="getMoney" />
    已有{{money}}元
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import { ref } from "vue";
export default {
  components: {
    HelloWorld
  },
  setup() {
    const money = ref(0);
    const getMoney = (value) => {
      money.value = value;
    };
    return {
      money,
      getMoney
    };
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="giveMoney">给父亲买烟钱</button>
  </div>
</template>
<script>
export default {
  // 父组件传过来的方法也要在此声明
  emits: ["getMoney"],
  setup(props, context) {
    // props接收到传过来的参数在这里使用
    // context接收到传过来的方法在这里
    const giveMoney=()=>{
      context.emit("getMoney", 1000);
    }
    return{
      giveMoney
    }
  }
};
</script>

3. 依赖注入 peovide、inject

适用于多层级的组件通信。无论层级有多深，都可以检测到数据。

父组件：

<template>
  <div>
    <about />
  </div>
</template>
<script>
import About from "./views/About";
import { provide,ref } from "vue";
export default {
  components: {
    About
  },
  setup() {
    const name =ref('Jevin')
    const sex =ref('male')
    provide("name", name);
    provide("sex", sex);
    return {};
  }
};
</script>

子组件：

<template>
  <div class="about">
    {{ name }}
    {{ sex }}
  </div>
</template>
<script>
import { inject } from 'vue';
export default {
  setup() {
    const name = inject("name");
    const sex = inject("sex");
    return {
      name,
      sex
    };
  }
};
</script>

<2>. 使用了setup语法糖的传参方式

1.父传子：

父组件：

<template>
  <div>
    <child :message="message" />
  </div>
</template>
<script setup lang="ts">
import child from "./component/child.vue";
import { reactive } from "vue";
type Message={
  name:string,
  sex:string
}
const message:Message = reactive({
  name: "Jevin",
  sex: "男",
});
</script>

子组件：使用的是TS可以这样写，和TS声明类型相近

<template>
  <div>
    {{ message.name }}
    {{ message.sex }}
  </div>
</template>
<script setup lang="ts">
type Message = {
  name: string;
  sex: string;
};
defineProps<{
  message: Message;
}>();
</script>

子组件：未使用TS这样写，和vue2相近

<script setup>
defineProps({
  message: {
    default(){
        return {}
    },
    type: Object,
  },
});
</script>

2.子父组件通信

父组件：

<template>
  <div>
    <child @onclick1="receiveMessage1" @onclick2="receiveMessage2" />
  </div>
</template>

<script setup lang="ts">
import child from "./component/child.vue";
const receiveMessage1 = (message: string) => {
  console.log(message, "父组件接收到的1");
};
const receiveMessage2 = (message: string) => {
  console.log(message, "父组件接收到的2");
};
</script>

子组件：使用defineEmits来获取父组件传递过来的方法。【数组类型，可以同时获取多个】

<template>
  <div>
    <button @click="send1">发送消息给父组件1</button>
    <button @click="send2">发送消息给父组件2</button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const message = reactive("aaaaa");
const emit=defineEmits(["onclick1",'onclick2'])
const send1 = () => {
    emit("onclick1", message);
};
const send2 = () => {
    emit("onclick2", message);
};
</script>

3.子组件也可以通过ref将信息暴露给父组件

父组件：

<template>
  <div>
    <child ref="childRef" />
    {{childRef}}
  </div>
</template>
<script setup lang="ts">
import child from "./component/child.vue";
import { ref } from "vue";
const childRef = ref(0);
</script>

子组件：defineExpose限制了父组件通过ref能获取到什么。

<script setup lang="ts">
import { reactive } from "vue";
const message = reactive("aaaaa");
defineExpose({message})
</script>

3. 祖孙组件通信 provide、inject

适用于多层级嵌套，A组件provide提供数据，子组件，子组件的子组件…都可以接收数据
祖组件 provide(‘名称’,数据) 提供数据

<template>
  <div>
    <child  />
  </div>
</template>
<script setup lang="ts">
import child from "./component/child.vue";
import { provide, ref } from "vue";
const message = ref(5454343);
provide('message',message)
</script>

子组件

<template>
    <div>{{message}}</div>
</template>
<script setup lang="ts">
    import { inject,ref } from "vue";
    const message=inject('message','')
    // const message=inject('message',ref('')) 
    //如果提供的值不具有响应式,这里可以加响应式功能
    console.log(message.value) //545434
</script>

4.兄弟组件传参

vue2我们都会使用eventBus，但是Vue3不支持eventBus $o n 、$ off 和 $once 实例方法被删除。

所以有的大神选择手写一个evntBus。原理其实是运用了JS设计模式之发布订阅模式。这里不多赘述，推荐一个插件来代替手撸eventBus。

安装：

npm i mitt

使用方法和eventBus类似，在main.ts挂载在原型上或者单独引用使用

单独引用：定义一个bus.js

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

父组件定义A、B两个兄弟组件

<template>
  <div>
    <A />
    <B />
  </div>
</template>
<script setup lang="ts">
import A from "./component/A.vue";
import B from "./component/B.vue";
</script>

A组件：

<template>
  <div>
    <button @click="send">兄弟组件传参</button>
  </div>
</template>
<script setup lang="ts">
import bus from "../../utils/bus";
import { ref } from "vue";
const message = ref("aaaaaaaaaaa");
const send = () => {
  bus.emit("Amessage", message);
};
</script>

B组件：

<template>
  <div>BBBB</div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import bus from "../../utils/bus";
onMounted(() => {
  bus.on("Amessage", (message) => {
    console.log(message);
  });
});
</script>

全局挂载使用：

因为在2.X版本中创建一个vue 实例是通过 new Vue()来实现的，到了3.X中则是通过使用createApp这个 API返回一个应用实例，并且可以通过链条的方式继续调用其他的方法

import mitt from 'mitt'
const app = createApp(App)
app.config.globalProperties.$bus=mitt()

父组件：引用了A、B两个兄弟组件

<template>
  <div>
    <A />
    <B />
  </div>
</template>
<script setup lang="ts">
import A from "./component/A.vue";
import B from "./component/B.vue";
</script>

A组件：通过 appContext.config.globalProperties获取上下文的全局配置。

<template>
  <div>
    <button @click="send">兄弟组件传参</button>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, type ComponentInternalInstance } from "vue";
const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const message = ref("aaaaaaaaaaa");
const send = () => {
  appContext.config.globalProperties.$bus.emit("Amessage", message);
};
</script>

B组件：

<template>
  <div>BBBB</div>
</template>
<script setup lang="ts">
import {
  getCurrentInstance,
  onMounted,
  type ComponentInternalInstance,
} from "vue";
const { appContext } = getCurrentInstance() as ComponentInternalInstance;
onMounted(() => {
  appContext.config.globalProperties.$bus.on("Amessage", (message: string) => {
    console.log(message);
  });
});
</script>