当前位置：首页 > news >正文

必知的 Vue3 组件传值技巧：解锁组件交互新姿势

news 2025/7/1 2:19:10

在这里插入图片描述

父传子defineProps

基本概念

在 Vue 3 中，父传子是一种组件间通信的方式，用于将父组件的数据传递给子组件。这种通信方式可以让组件之间更好地协作，实现功能的复用和模块的划分。

实现步骤

在父组件中传递数据
App.vue

<template><Header propsName="夏天学编程" propsUrl="xiatian" /><button @click="countAdd">点击</button><Footer :="propsWeb" />
</template>
<script setup>import {reactive} from 'vue';import Header from './header.vue';import Footer from './footer.vue';const propsWeb = reactive({user:'夏天',url:'biancheng',count:10})const countAdd = () => {propsWeb.count++;console.log(propsWeb.count);}
</script>

在子组件中接收数据
在子组件header.vue和footer.vue中，需要使用props来接收父组件传递过来的数据。
首先，通过defineProps函数定义了一个props对象，它包含多个属性，并且指定了其类型。这是一种类型检查的方式，可以确保传递的数据类型符合预期。然后，将props里面的属性值赋值给propsWeb变量，这样就可以在子组件的模板中使用propsWeb来显示父组件传递过来的数据了。

header.vue

<template><h3>Header</h3>
</template>
<script setup>const props = defineProps(["propsName","propsUrl"])console.log(props)
</script>

footer.vue

<template><h3>Footer</h3>
</template>
<script setup>
const props = defineProps({user: String,url: {type: String,Required: true,default: "xiatian.com",},count: Number,
});
console.log(props);
</script>

数据类型检查和默认值

类型检查

在defineProps中可以对传递的数据进行类型检查，除了String类型，还可以是Number、Boolean、Object、Array等。

设置默认值

可以为props设置默认值，当父组件没有传递相应的数据时，子组件就会使用默认值。

动态数据传递

父组件传递的数据可以是动态变化的。例如，父组件中有一个按钮，点击按钮可以改变传递给子组件的数据。
当点击按钮时，count的值会改变，这个变化会自动传递给子组件，子组件会根据新的数据进行更新。这是因为 Vue 的响应式系统会自动跟踪数据的变化，并更新与之相关的组件。

子传父defineEmits

基本概念

在 Vue 3 中，子传父是组件间通信的重要方式。它允许子组件将数据或事件传递给父组件，从而实现组件之间的反向通信，这在构建复杂的应用程序结构时非常有用。

实现步骤

在父组件中监听事件并接收数据
App.vue

<template><Header @gitWeb="emitsGitWeb" @userAdd="emitsUserAdd"/>{{ web.url }} - {{ user }}
</template>
<script setup>import { ref, reactive } from 'vue'const web = reactive({name: "夏天",url: 'xiatian.com'})const user = ref(0)const emitsGitWeb = (data) => {console.log(data)}const emitsUserAdd = (data) => {console.log(data)user.value += data}
</script>

在子组件中触发事件

header.vue

<template><div><h1>我是header</h1><button @click="add">点击</button></div>
</template>
<script setup>const emits = defineEmits(['gitWeb','userAdd'])emits("gitWeb",{name:'夏天学编程',url:'www.xiatian.com'})// 子组件可以向父组件传递多个参数。const add = ()=>{emits('userAdd',10)}
</script>