zoukankan      html  css  js  c++  java
  • vue父子组件的双向绑定

    在vue中,子组件和父组件的值要实现双向绑定

    首先要知道:
    1.父组件的值发生变动会直接影响到使用该值的子组件
    2.子组件无权改变props里面的值,仅有使用权限

    解决思路为:
    1.根据v-model自定义语法糖
    2.在子组件中用value属性监听仅使用props中的值,再实时监听值去调用父组件的方法改变父组件的值

    最终实现:
    1.子组件中<input :value='父组件的值' @input='监听输入事件'> props:['父组件的值']
    2.子组件 监听输入事件=(e)=>{this.$emit('父组件的方法',e.target.value)}
    3.父组件中 <子组件 父组件的值='父组件的值' @父组件的方法="父组件的值=$event"></子组件>


    简化:
    在新的vue版本中,vue简化了父子组件双向绑定中父组件要做的事情,如下:
    1.父组件中绑定的方法改为 <子组件 父组件的值.sync='父组件的值'></子组件>
    2.子组件中<input :value='父组件的值' @input='监听输入事件'> props:['父组件的值']
    3.子组件 监听输入事件=(e)=>{this.$emit('update:父组件的值',e.target.value)}

    肖cc QQ2398506993
  • 相关阅读:
    ios开发 MJExtension
    ios开发 time profile用法
    ios开发 UIApplication
    ios AFNetWorking
    ios开发 为什么NSString、NSArray、NSDIctionary用copy修饰
    ios动画
    ios开发GCD
    重要链接
    记录,员工关心的内容。
    怎样用 Wise Installation System 制作汉化补丁?(转)
  • 原文地址:https://www.cnblogs.com/alecc1124/p/14767825.html
Copyright © 2011-2022 走看看