父子组件使用v-model实现数据的双向绑定


 父子组件实现数据双向绑定
  props 单向数据流 父 ==> 子
  使用v-model 原理是value属性和input事件
  + 实现步骤:
    - 1. 在父组件中注册子组件并使用
    - 2. 在子组件上使用v-model=父组件data值
    - 3. 在子组件中使用props属性接收一个value属性
    - 4. 在子组件中data定义一个临时变量(目的是存放value的值)
    - 5. 在子组件中使用watch监听value的值,当value的值修改时将最新的值赋值给临时变量
    - 6. 在子组件中使用watch监听临时变量的值,当临时变量的值修改时将最新的值使用this.$emit('input', val) 触发input事件
    - 7. 这样操作就可以实现父子组件的数据双向绑定
 
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM