美文网首页
Vue3.x 父子通讯

Vue3.x 父子通讯

作者: 沃德麻鸭 | 来源:发表于2021-09-15 00:02 被阅读0次

    在Vue3中进行父子的通讯,原理和Vue2做法差不多

    1.父组件向子组件传递数据:自定义属性props

    2.子组件向父组件传递数据:自定义事件$emit()

    父传子:自定义属性

    (父组件) (子组件)

     总结:

    1.子组件模板中直接可以获取props中的属性值

    2.js代码中需要通过setup函数的第一个形参props获取属性值


     子传父:自定义事件

    父组件

     注意标绿部分对emits的使用

    子组件

    总结:

    1.通过setup函数的参数二context.emit方法触发自定义事件 context.emit('send-money', 50)

    2.子组件触发的自定义事件需要在emits选项中进行声明(直观的看到本组件触发了那些自定义事件)

    相关文章

      网友评论

          本文标题:Vue3.x 父子通讯

          本文链接:https://www.haomeiwen.com/subject/qcoowltx.html