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

相关推荐
wocwin3 分钟前
Vue移动端项目二次封装原生table组件,支持表头/数据动态配置(支持多级表头、排序);作用域插槽、render函数渲染某列数据等功能
vue.js
你怎么知道我是队长13 分钟前
python---eval函数
开发语言·javascript·python
溟洵15 分钟前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户25191624271120 分钟前
Canvas之图像合成
前端·javascript·canvas
每天开心21 分钟前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
超凌21 分钟前
el-input-number出现的点击+-按钮频现不生效
前端
NicolasCage22 分钟前
Icon图标库推荐
vue.js·react.js·icon
三小河22 分钟前
contentEditable 实现可编辑区域
前端
一道雷30 分钟前
🧩 Vue Router嵌套路由新范式:无需嵌套 RouterView 的布局实践
前端·vue.js
Mintopia35 分钟前
🎯 光与面的命运交锋:Möller-Trumbore 线段三角形相交算法全解析
前端·javascript·计算机图形学