位置: IT常识 - 正文
vue3 父子组件传参详解(vue3父子组件传递数组通信)
编辑：rootadmin推荐整理分享vue3 父子组件传参详解(vue3父子组件传递数组通信)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue3父子组件传参同步更新,vue3父子组件传值的四种方式,vue3父子组件传参同步更新,vue3父子组件传递数组通信,vue3父子组件传参同步更新,vue3父子组件传值实时更新,vue3 父子组件传递函数,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 = 1const 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) //1console.log(childRef.value.b) //2 响应式数据}</script>以上就是全部内容，我也只是一个小白，才学一天做个总结而已
上一篇：Segment Anything Model (SAM)——卷起来了，那个号称分割一切的CV大模型他来了(segment anything model模型 需要的配置)
下一篇：vue中使用唯一标识uuid——uuid.v1()-时间戳、uuid.v4()-随机数(vue指定)
