也是零零散散用 vue3 来搞一些前端的页面, 每次在组件通信, 主要是传数据这块总是忘记, 大多无非父传子, 子传父等情况, 这里再来做一个小结.
父传子 Props
最常见的就是父组件给子组件传递数据, 不论是传字符串也好, 还是数组, 对象, 函数等, 都可以通过 属性传值 的方式, 子组件通过 defineProps 对应接收即可.
App.vue
<script setup>
import Son from './components/Son.vue'
// 1. 定义父组件要通过 arr 属性传递给子组件 Son.vue 的数据
const arr = [1, 2, { name: 'youge', age: 18 }]
</script>
<template>
<!-- 子组件 -->
<Son :arr="arr" @refresh="handleRefresh"></Son>
</template>
Child.vue
<script setup>
import { ref } from 'vue'
defineProps({
arr: Array,
})
</script>
<template>
<div>
子组件:
<br /> <br />
父组件传来的数据: <br />
{{ arr }}
</div>
</template>
子组件:
父组件传来的数据:
[ 1, 2, { "name": "youge", "age": 18 } ]
总之父传子, 通过属性传递方式, 啥都能传哈, 子组件通过defineProps 都能接收处理.
子传父 Emit
而使用最多的场景是将页面拆分为很多小组件, 子组件, 数据在子组件交互然后渲染或者传递给父组件, 这种情况就用 $emit 来实现.
先又子组件派发, 传递, 然后父组件对应接收.
Child.vue
<script setup>
const data = [
{ name: 'huoya', age: 18 },
{ name: 'cj' , age: 20 }
]
// 01: 都是要进行先定义出事件名称
const emit = defineEmits(['refresh_01', 'refresh_02'])
// 02: 推荐函数写法可以更灵活控制 emit 的触发时间
const handleClick = () => {
emit('refresh_02', data)
}
</script>
<template>
<div class="con">
<!-- 行内写法 -->
<button @click="$emit('refresh_01', data)">标签写法: 向父组件传数据</button>
<!-- 函数写法 -->
<button @click="handleClick">函数写法: 向父组件传数据</button>
</div>
</template>
App.vue
<script setup>
import { ref } from 'vue'
import Son from './components/Son.vue'
const sonData_01 = ref(null)
const sonData_02 = ref(null)
// 处理子组件传递过来的数据
const handleRefresh_01 = (e) => {
sonData_01.value = e
}
const handleRefresh_02 = (e) => {
sonData_02.value = e
}
</script>
<template>
<div class="con">
父组件:
<br /><br>
{{ sonData_01 }}
<br /><br>
{{ sonData_02 }}
</div>
<!-- 调用子组件 -->
<Son @refresh_01="handleRefresh_01" />
<Son @refresh_02="handleRefresh_02" />
</template>
小结子传父通过 emit 事件实现的 4 步走:
- 01: 在子组件先定义事件,
const emit = defineEmits(['A', 'B']) - 02: 在子组件调用事件, 向父组件传递数据
const handleClick = () => { emit('A', data } - 03: 在父组件通过
@A="handleA"来监听子组件传过来的事件A - 04: 在父组件定义一个方法
handleA来接收子组件通过事件A传递过来的数据
子传父 DefineExpos / Ref
还有种常用的方法是, 子组件通过 defineExpose 向外暴露一个方法,
然后父组件通过 ref 调用子组件的方法, 顺带将数据带过来.