通过v-model‘实现’组件双向数据绑定

2019独角兽企业重金招聘Python工程师标准>>>

单向数据流

• 单向数据流是Vue组件一个非常明显的特征，不应该在子组件中直接修改props的值

• 如果传递的prop仅仅用作展示，不涉及修改，则在模板中直接使用即可
• 如果需要对prop的值进行转化然后展示，则应该使用computed计算属性
• 如果prop的值用作初始化，应该定义一个子组件的data属性并将prop作为其初始值

组件之间的通信

• 父子组件的关系可以总结为 prop 向下传递，事件event向上传递
• 祖先组件和后代组件（跨多代）的数据传递，可以使用provide和inject来实现
• 跨组件或者兄弟组件之间的通信，可以通过eventBus或者vuex等方式来实现

---

封装的组件如何实现v-model的数据双绑的效果

以下两种通常是我们的实现方式, 看着就很麻烦

1. 通过emit将事件派发到父组件，prop将数据传到子组件

   每个父组件都要实现changeValue方法来接收数据并更新数据

    // 子组件
    

    

    // 父组件
    

    

2. 将加减执行的回到函数通过父组件传到子组件中实现改变数据

   每个父组件都要实现add和reduce两个方法

    // 子组件
    

    
    
    // 父组件
    

    

通过v-model语法糖实现，父子组价的数据双绑

Vue内置了v-model指令，v-model 是一个语法糖，可以拆解为 props: value 和 events: input。就是说组件只要提供一个名为 value 的 prop，以及名为 input 的自定义事件，满足这两个条件，使用者就能在自定义组件上使用 v-model，戳这里看model配置

// 子组件
  

  
  // 父组件只需要通过v-model将数据传进去就好了
  

  

转载于:https://my.oschina.net/u/3407699/blog/3048602