VUE3_组件间传值的三种方法_setup语法糖_记录
前言记录下Vue3中setup语法糖集成到script标签后父子组件的传值方法。一、父传子父组件//通过动态绑定的方式<template><div><button>父组件</button><Child :sex="sex" @FatherMethod"></Child></div><template>&
·
前言
记录下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>
更多推荐
所有评论(0)