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中动态组件使用

相关推荐
梦鱼8 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best6669 分钟前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东10 分钟前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生10 分钟前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙11 分钟前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年15 分钟前
webpack和vite优化方案都有哪些
前端·webpack·node.js
给月亮点灯|16 分钟前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
kk不中嘞19 分钟前
Webpack 核心原理剖析
前端·webpack·node.js
Yvonne爱编码22 分钟前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码23 分钟前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d