当前位置: 首页 > news >正文

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=valuegetList.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中动态组件使用
在这里插入图片描述

http://www.lryc.cn/news/295067.html

相关文章:

  • SpringBoot整理-微服务
  • 服务器和CDN推荐
  • c#读取csv文件中的某一列的数据
  • 不懂快团团大团长对接?凭什么快团团的钱轮到你赚?
  • OpenGL 入门(九)—Material(材质)和 光照贴图
  • jmeter-03界面介绍
  • 探究 MySQL 中使用 where 1=1 是否存在性能影响
  • VSCode无法启动:Waiting for server log...
  • VMware虚拟机清理瘦身
  • Coil:Android上基于Kotlin协程的超级图片加载库
  • 时间序列(Time-Series)MultiWaveletCorrelation.py代码解析
  • C++的缺省参数和函数重载
  • nginx upstream server主动健康检测模块ngx_http_upstream_check_module 使用和源码分析(上)
  • 第01课:自动驾驶概述
  • Docker进阶篇-CIG重量级监控系统
  • 鸿蒙踩坑合集
  • Golang-Map有序输出——使用orderedmap库实现
  • 基础数学问题整理
  • 【Linux】环境基础开发工具的使用(一)
  • 突破编程_C++_面试(基础知识(5))
  • 十分钟掌握Go语言==运算符与reflect.DeepEqual函数处理interface{}值的比较规则
  • Unity3d Shader篇(一)— 顶点漫反射着色器解析
  • WordPress主题YIA的文章页评论内容为什么没有显示出来?
  • 选择低代码应该注意什么?如何选择?
  • 橘子学linux调优之工具包的安装
  • 函数的连续与间断【高数笔记】
  • 游戏如何选择服务器
  • ubuntu20安装mysql8
  • 07 SB3之@HttpExchange(TBD)
  • Redis数据淘汰策略