vue3 父子组件传参详解(vue3父子组件传递数组通信)

vue3 父子组件传参详解

推荐整理分享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>

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