专栏首页kyle的专栏使用v-model对父子组件进行双向绑定

使用v-model对父子组件进行双向绑定

在vue中,通常父子组件通信,我们使用的是props,但是有的场景,我们需要对父子组件进行双向绑定。这时我们会用到v-model自定义组件。

官网的解释则是,父组件将值通过v-model进行绑定,之后子组件通过propskeyvalue进行接收,通过事件input触发更改父组件。

当然为了避免子组件内有data,或其他props名为value,所以在当前实例下,有一个model属性,定义方法如下

 model: {
    prop: 'checked', // props默认是value
    event: 'change' // 事件名默认是input
  },

这样在子组件内通过$emit触发定义好的model事件名更改父组件的值。并且我们通过watch监听父组件值的更改绑定至子组件。代码如下:

父组件

父组件

子组件

子组件

效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue全局组件和局部组件及组件传值

    就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。下面是使用在root根示例下的first-component全局组件: ...

    _kyle
  • react-router4

    react-router是一些封装好的组件用于前端路由,当我们点击的时候会出现一个虚拟的路由,并不会做页面的全刷新,实现不同组件之间的切换和跳转。(当然reac...

    _kyle
  • react-redux

    React-Redux是Redux的官方React绑定。 它允许您的React组件从Redux存储中读取数据,并将操作分派给存储以更新数据。 它由二个重要的部...

    _kyle
  • Vue组件之间传值

    这个方法应该是最常用的,父组件通过bind指令传给子组件,子组件通过跟data同级的props数组接收。

    wade
  • 如何开发中后台项目

    工作中的你,是不是手上做着后台系统项目,应对着做不完的需求,觉得做后台系统是个没有技术含量的活,技术没法提升,这么想或许你就错了,如果能做以到以下几点,不仅可以...

    用户1741436
  • 可视化搭建平台的地图组件和日历组件方案选型

    可视化搭建平台除了需要为用户提供简单便捷的操作方式之外, 还需要提供丰富的组件支持和组件扩展, 这样才能满足更多用户的业务需求.

    徐小夕
  • 前端组件设计原则

    我在最近的工作中开始使用 Vue 进行开发,但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多,但是二...

    苏南
  • 编写高质量可维护的代码:组件的抽象与粒度

    作为一名精致的前端猪猪女孩,也有那么点想让自己的代码同样看起来精致一点。所以在拿到新需求的 UI 设计稿时,经常会面临如下问题:如何拆解页面?如何划分组件才算是...

    政采云前端团队
  • 【译】选择Bit.dev构建组件库的15个理由

    2019年的时候,UI组件库在普及度上有了巨大的飞跃。当然这并不多么令人惊奇,因为像Uber、Airbnb、Booking等等公司都在通过共享的UI组件来保证其...

    腾讯IVWEB团队
  • kg-ui基于hippy-react组件库设计和工程化思考

    单一职责的组件的好处很明显,可以最大可能性地复用组件,但是这也带来一个问题 , 过度单一也可能会导致过度抽象,造成组件库的碎片化;比如在实现小红点,小红点基本上...

    melodyren

扫码关注云+社区

领取腾讯云代金券