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

相关推荐
我是日安2 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
小lan猫6 分钟前
React学习笔记(一)
前端·react.js
晨米酱6 分钟前
JavaScript 中"对象即函数"设计模式
前端·设计模式
拜无忧7 分钟前
【教程】Nuxt v4 入门指南与实践 (vue前端角度开发)
前端·nuxt.js
云枫晖10 分钟前
手写Promise-什么是Promise
前端·javascript
拜无忧10 分钟前
html,svg,花海扩散效果
前端·css·svg
DevUI团队10 分钟前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
RoyLin12 分钟前
TypeScript设计模式:责任链模式
前端·后端·typescript
一枚前端小能手12 分钟前
📋 前端复制那点事 - 5个实用技巧让你的复制功能更完美
前端·javascript
三小河14 分钟前
解决vite环境下调用获取二进制文件流 部分文件报错 (failed)net::ERR_INVALID_HTTP_RESPONSE)
前端