前言

记录下Vue3中setup语法糖集成到script标签后父子组件的传值方法。

22.4.17更新

在实际优化项目时，发现了更好的方法——“依赖注入” 以及 利用 sessionStorage

一、浏览器缓存机制

这个方法偶然看见的，觉得有时候还挺使用的，功能有点类似VueX，不过是将数据存入浏览器的缓存sessionStorage中了
组件1

//比如我有一个数组arr要传递
sessionStorage.setItem("arr_public", JSON.stringify(arr));

组件2

const arr_copy = JSON.parse(sessionStorage.getItem("arr_public"))

---

二、依赖注入

tips:

父级组件与子孙级组件之间的数据传递数据的传递，或者有很多后代组件的情况，
只针对直系后代使用，在setup生命周期中使用

在 vue3中依赖注入的写法有些变化
父组件

import { ref, provide} from 'vue';
...
provide("Info", '老八秘制小汉堡');
...

子组件

import { inject } from 'vue';
...
const chilldInfo = inject('Info')

---

三、vue3父子值传递

1、父传子

父组件

//通过动态绑定的方式
 <template>
 	<div>
		<button>父组件</button>
		<Child :sex="sex" @FatherMethod"></Child>
	</div>
<template>

<script setup lang="ts">
//引入子组件
import Child from './child.vue';
import { ref } from "vue";
const sex = ref('male');
const FatherMethod = () => {
	console.log('嗨嗨嗨，我是父组件');
};
</script>

子组件

<template>
  <div>
    <button @click="ChildMethod">子组件</button>
  </div>
</template>
<script setup lang="ts">
//子组件接收
const props = defineProps(["sex"])
const ChildSex = props.sex;
//子组件中自定义事件
const emits = defineEmits(["FatherMethod"]);
const ChildMethod = () => {
	emits("FatherMethod");
};
</script>

---

2、子传父

父组件

 <template>
 	<div>
		<button @click="FatherMethod">父组件</button>
		<Child ref="Childs">{{sex}}</Child>
	</div>
<template>

<script setup lang="ts">
//引入子组件
import Child from './child.vue';
import { ref } from "vue";
//声明子组件
const Childs: any = ref(null);
const FatherMethod = () => {
	//子组件.value.方法
	Childs.value.ChildMethod();
};
</script>

子组件

<template>
  <div>
    <button>子组件</button>
  </div>
</template>
<script setup lang="ts">
//子组件中定义事件第一种方法
const emits = defineEmits(["sex"]);
//子组件中定义事件第一种方法
function height() {
	//第一个参数是提交的变量名，后面是参数
	emit('height', 192);
};
//子组件的方法
const ChildMethod = () => {
	console.log('嗨害嗨，我是子组件');
};
//暴露出去
defineExpose({
	ChildMethod
})
</script>

---