超详细的 | vue3组件之间的通信方式（一）(父传子、子传父)一篇文章让你彻底搞懂如何传值
前端阿帅 2024-09-07 15:33:01 阅读 85
一、父组件向子组件传值(props)
1.废话不多说直接上代码
父组件：FatherTest.vue
<code><template>
<div class="box">code>
<h1>props:我是父组件曹操</h1>
<Child info="我是曹操" :money="money"></Child>code>
</div>
</template>
<script setup lang="ts">code>
//导入子组件 props:可以实现父子组件通信,props数据还是只读的
import Child from "./Child.vue";
import { ref } from "vue";
//定义数据
let money = ref(8888);
</script>
子组件：Child.vue
<template>
<div class="son">code>
<h1>我是子组件:曹丕</h1>
<p>{ {props.info}}</p>
<p>{ {props.money}}</p>
</div>
</template>
<script setup lang="ts">code>
//注意：
//1.需要使用到defineProps方法去接受父组件传递过来的数据
//2.defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(['info','money']); //数组|对象写法都可以
</script>
在 Vue 3 中，我们使用 <script setup> 语法糖，这让组件定义更加简洁。ref 用于定义响应式数据。defineProps：是 Vue 3 中的一个函数，用于定义组件的 props，使用 defineProps函数定义的 props 是只读的响应式对象，它们的值由父组件传递而来，不能被子组件修改。
二、子组件向父组件传值(自定义事件)
子组件通过 emit 函数可以实现了子组件向父组件传值的功能
父组件：FatherTest.vue
<template>
<div>
<!--
vue2框架当中:@click这种写法自定义事件,可以通过.native修饰符变为原生DOM事件
vue3框架下面写法其实即为原生DOM事件
vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件
-->
<!-- 绑定自定义事件child-event:实现子组件给父组件传递数据 -->
<Child @child-event="handler3" @click="handler4"></Child>code>
</div>
</template>
<script setup lang="ts">code>
//引入子组件
import Child from './Child.vue';
//事件回调---4
const handler3 = (param1,param2)=>{
console.log(param1,param2);
}
//事件回调--5
const handler4 = (param1,param2)=>{
console.log(param1,param2);
}
</script>
子组件：Child.vue
<template>
<div class="child"> code>
<p>我是子组件2</p>
<button @click="handler">点击我触发自定义事件child-event</button> code>
<button @click="emitClick">点击我触发自定义事件click</button> code>
</div>
</template>
<script setup>
// 使用 defineEmits 声明可以触发的自定义事件
const emit = defineEmits(['child-event', 'click']);
// 按钮点击回调，触发 child-event
const handler = () => {
emit('child-event', '参数1', '参数2');
};
// 另一个按钮点击回调，触发 click 事件
const emitClick = () => {
emit('click', '小猫', '小狗');
};
</script>
defineEmits 是 Vue 3 Composition API 中的一个函数，用于在组件中明确地声明该组件可以触发的自定义事件。父组件通过 @child-event 监听子组件发出的事件，并在事件发生时执行 handler3方法。
子传父 补充说明：defineExpose也可以实现子组件向父组件传递数据
defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数，用于在 <script setup> 语法下显式暴露组件的公共属性和方法
这在处理子组件时特别有用，允许父组件访问子组件的特定属性或方法
在 Vue 3 中，当我们使用 <script setup> 语法糖时，组件默认不会自动暴露内部的任何状态或方法给外部使用，为了显式暴露某些属性或方法，可以使用 defineExpose
子组件
<template>
<div>
<p>Count: { { count }}</p>
<button @click="childEvent">childEvent</button>code>
</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const childEvent=()=> {
count.value++;
}
// 使用 defineExpose 来暴露 count的值 和 childEvent方法
defineExpose({
count,
childEvent,
});
</script>
父组件
<template>
<div>
<Child ref="childRef" />code>
<button @click="accessChild">Child</button>code>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import Child from './Child.vue';
const childRef = ref(null);
const accessChild =()=> {
if (childRef.value) {
console.log('Current count:', childRef.value.count); /// 打印出来为子组件count的值0
childRef.value.childEvent(); 可以触发子组件childEvent方法 实现子组件count++
}
}
</script>
defineExpose 用于在 <script setup> 中显式暴露组件内部状态、属性和方法；父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。