Vue3组件传参的几种方式——父子组件传参、子父组件传参、eventBus挂载原型
目录
-
- 为什么使用组件传参？
- <1>. 不使用语法糖和ts的组件传参：
-
-
- 1. 组件通信——父传子
- 2. 子父组件通信
- 3. 依赖注入 peovide、inject
-
- <2>. 使用了setup语法糖的传参方式
-
-
- 1.父传子：
- 2.子父组件通信
- 3. 祖孙组件通信 provide、inject
- 4.兄弟组件传参
-
为什么使用组件传参？
组件传参在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 、 on、 on、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>