美文网首页
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 父子通讯

    在Vue3中进行父子的通讯,原理和Vue2做法差不多 1.父组件向子组件传递数据:自定义属性props 2.子组件...

  • Vue3.x 父子通讯

    在Vue3中进行父子的通讯,原理和Vue2做法差不多 1.父组件向子组件传递数据:自定义属性props 2.子组件...

  • vue组件通信

    1.组建通讯---父子组件通讯 父子通信通过props属性进行传值 父组件 子组件 1.组建通讯---子父组件通讯...

  • (十五)Vue3.x中我们将采用mitt实现全局事件总成

    本章我们将聊到一个重点,在Vue3.x中实现全局通讯。 1、前言:由于Vue3.x中删除了off,因此不能借助于一...

  • VUE父子组件之间的通讯

    VUE父子组件之间的通讯

  • vue父子通讯

    前言 父子通讯在vue的项目里面有提到过并且也有很细的解释但是还是觉得有必要单独写一个 一、父组件向子组件传递数据...

  • react父子通讯

    父子通讯父传数据给子,子传数据给父 react组件class 组件名 extends React.Componen...

  • 前端面试必问的

    vue组件通讯的原则 1、父子通讯 props。2、子到父,用自定义事件。非父子组件,就用vuex,就行了

  • VUE系列之非父子组件之间的通讯

    VUE系列之非父子组件之间的通讯

  • Vue.js 非父子组件之间的通讯

    Vue.js 非父子组件之间的通讯 在一些非父子组件会经常用到互相之间的通讯功能,Vue.js 有 vuex 状态...

网友评论

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

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