Vue3父子组件传参

一,父子组件传参

应用场景:父子组件传参

Vue3碎片:defineEmits,defineProps,ref,reactive,onMounted

1.父组件传子组件

a.父组件传参子组件

复制代码
import { ref} from 'vue'
import OnChild from './onChild.vue'
const toGive=ref("apple");

<OnChild :getGive="toGive" />

b.子组件获取

复制代码
import { onMounted} from 'vue'
const getFruit=defineProps({
      getGive:String
})
onMounted(()=>{
  console.log("子组件获得",getFruit.getGive)
})

2.子组件传父组件

a,子组件

复制代码
import { reactive} from 'vue'
const playList=reactive({ name:"路人甲"})
playList.type="乒乓球🏓!";

const emit= defineEmits(['toList']);

const pass=()=>{
      playList.status="发送了一个"
      emit('toList',playList)
}

b,父组件获取

复制代码
import { reactive} from 'vue'
import OnChild from './onChild.vue'
const getList= reactive({});

<OnChild  @toList="getListArr"/>

const getListArr=(value)=>{
     // getList.value=value
      getList.value = { ...Object.assign({}, value)}
      console.log("接收一个",getList.value);
}

c,父组件更新子组件传送信息

复制代码
const  updateInfo=(()=>{
      toGive.value="orange";
      console.log("传给子组件一个",toGive.value);
})

3.效果图

简单使用,总结至此,欢迎各位工友交流学习。

传送门:
1.Vue3中provide,inject使用
2.Vue3中使用自定义指令
3.Vue3中动态组件使用

相关推荐
加班是不可能的,除非双倍日工资1 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi2 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip2 小时前
vite和webpack打包结构控制
前端·javascript
excel2 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
阿华的代码王国3 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼3 小时前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin
Jimmy3 小时前
AI 代理是什么,其有助于我们实现更智能编程
前端·后端·ai编程
草梅友仁3 小时前
草梅 Auth 1.4.0 发布与 ESLint v9 更新 | 2025 年第 33 周草梅周报
vue.js·github·nuxt.js
ZXT3 小时前
promise & async await总结
前端
Jerry说前后端3 小时前
RecyclerView 性能优化:从原理到实践的深度优化方案
android·前端·性能优化