vue3 父子组件传参详解

前言：我引用了大佬的文章，但我实在找不到网址链接了，我记录在笔记上的。如果大佬看见了，麻烦给我说一下，我注明一下出处

建议先看son.vue 里面写了那三种方式

首先放一个我的demo //不用引入直接用，内置API

father.vue

<template>
<div class="box">
<son-item @fua="fub" :numa="numb" ref="childRef"></son-item>
</div>
</template>
<script setup>
import sonItem from '@/components/son.vue';
import { ref } from 'vue';
let numb = ref(0)
const childRef= ref()//注册响应数据！！！！！！！！！！！！！！！！
//一定要注意这句，要去注册ref，不然就不能解析出来了，这是个踩过的坑
let fub = (e)=>{
console.log('这是父组件被动接收的子组件的参数'+e);
numb.value++
console.log('这是父组件主动获取的子组件的参数:'+childRef.value.selfNum);//偷了懒，没有单独去写一个方法，反正也是父组件里面的方法，将就用一下
}
</script>

son.vue

<template>
<div class="box">
子组件接收的参数：{{ numa }}<br>
子组件自定义的参数：{{ selfNum }}<br>
//打印表里面有父组件主动获取子组件自定义的参数<br>
<button @click="fuc">this is a magic button</button>
</div>
</template>
<script setup>
import { ref } from "vue"
//1、子组件接收父组件的参数
defineProps({
numa: {
type: Number,
default: NaN,
}
})
//2、子组件传给父组件参数(子组件调用父组件的方法并传参进去)
const str = '这是子组件数据'
const emits = defineEmits(['fua'])//这里暴露父组件自定义的方法
const fuc = () => {
emits('fua', str)
selfNum.value+=2
}
//3、父组件（主动）获取子组件里面自定义的参数
let selfNum = ref(0)//自定义一个变量并用上面方法改变其值
defineExpose({
selfNum//暴露子组件值，让父组件随时可以抓取
})
</script>

注意：如果son需要father传来的值做一些操作的话；需要拿一个值来接收defineProps，例如：

const props = defineProps({
numa: {
type: Number,
default: NaN,
}
})
console.log(props.numa);

为了区分变量和函数所以用了xxa,xxb,xxc//变量用得不一样，这样更好区分对应的东西

其实我的demo已经讲得很清楚了，如果实在不懂也可以看下文//我也是小白，麻烦有不足请指出

下面是大佬的文章，但也做了一点小修改

（1）defineProps：子组件接收父组件中传来的props

父组件代码

<template>
    <my-component @click="func" :numb="numb"></my-component>
</template>
<script lang="ts" setup>
    import {ref} from 'vue';
    import myComponent from '@/components/myComponent.vue';
    const numb = ref(0);
    let func = ()=>{numb.value++;}
</script>

子组件代码

<template>
    <div>{{numb}}</div>
</template>
<script lang="ts" setup>
    defineProps({
        numb:{
            type:Number,
            default:NaN
        }
    })
</script>

（2）[1] defineEmits 代替emit，子组件向父组件传递数据（子组件向外暴露数据）

子组件代码

<template>
    <div>子组件</div>
    <button @click="toEmits">子组件向外暴露数据</button>
</template>
<script setup>
    import {ref} from 'vue'
    const name = ref('我是子组件')
    //1、暴露内部数据const
    emits = defineEmits(['childFn']);
    const  toEmits = () => {
    //2、触发父组件中暴露的childFn方法并携带数据
        emits('childFn',name)
    }
</script>

父组件代码

<template>
<div>父组件</div>
<Child  @childFn='childFn' />
<p>接收子组件传递的数据{{childData}} </p>
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childData = ref(null)
const childFn=(e)=>{
consloe.log('子组件触发了父组件childFn，并传递了参数e')
childData=e.value
}
</script>

[2] defineEmits：子组件调用父组件中的方法

子组件代码

<template>
<div>{{ numb }}</div>
<button @click="onClickButton">数值加1</button>
</template >
<script lang="ts" setup>
defineProps({
numb:{
type:Number,
default:NaN
}
})
const emit = defineEmits(['addNumb']);
const onClickButton = ()=>{
//emit(父组件中的自定义方法,参数一,参数二,...)
emit("addNumb");
}
</script>

父组件代码

<template>
<my-component @addNumb="func" :numb="numb"></my-component>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
const numb = ref(0);
let func = ()=>{
numb.value++;
}
</script>

（3）defineExpose：子组件暴露属性，可以在父组件中拿到

使用<script setup> 的组件，父组件是无法通过ref 或者 $parent 获取到子组件的ref等响应数据，需要通过defineExpose 主动暴露

子组件代码

<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
//主动暴露组件属性
defineExpose({
a,
b
})
</script>

父组件代码

<template>
<div>父组件</div>
<Child  ref='childRef' />
<button @click='getChildData'>通过ref获取子组件的属性 </button>
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childRef= ref()  //注册响应数据
const getChildData =()=>{
//子组件接收暴露出来得值
console.log(childRef.value.a) //1
console.log(childRef.value.b) //2  响应式数据
}
</script>

以上就是全部内容，我也只是一个小白，才学一天做个总结而已