vue3 setup语法糖父子组件的通信

2024-05-15 18:36| 来源: 网络整理| 查看: 265

在setup语法糖中父子组件的写法有两种 1、第一种用defineProps和defineEmits （1）父组件传值给子组件，子组件用defineProps接收父组件代码：

import {onMounted, ref} from 'vue'; //components import HelloWorld from '@/components/HelloWorld.vue'; //变量 const num=ref(0);

HelloWorld 子组件代码：

我是hello页面

import {defineProps,defineEmits} from 'vue' const prop=defineProps({ msg:Number })

(2) 子组件用 defineEmits 传递给父组件信息 HelloWorld子组件

我是hello页面

增加 import {defineProps,defineEmits} from 'vue' const prop=defineProps({ msg:Number }) const emit=defineEmits(['change']) const add=()=>{ console.log(prop.msg); emit('change','1234') }

父组件

import {onMounted, ref} from 'vue'; //components import HelloWorld from '@/components/HelloWorld.vue'; //变量 const num=ref(0); //方法 const change=(val:any)=>{ num.value++ }

2、父组件使用ref获取子组件的实例，从而获取子组件的变量和方法。但是要注意子组件无论是方法还是变量都要用defineExpose暴露出去，否则父组件是接收不到的。子组件:

我是child1页面

import {ref,defineExpose} from 'vue' //变量 const msg=ref('1245'); //方法 const sonMethod=()=>{ console.log('我是子页面的方法'); } defineExpose({ msg, sonMethod })

父组件:

父组件获取子组件的实例 import {onMounted, ref} from 'vue'; //components import child from '../components/ChildOne.vue' //子组件的类型 const sonRef=ref(); const getSon=()=>{ console.log(sonRef.value?.msg); sonRef.value?.sonMethod(); }

【本文地址】

公司简介

联系我们