vue-propsync v0.1.3

vue-propsync

vue-propsync：vue 组件的混合对象，主要用于组件编写时混入调用。

Thanks

• Vue minxins 官方文档
• propsync.js
• Vue2 利用 v-model 实现组件props双向绑定的优美解决方案

Introduction and Use

主要功能

1. 实现了在组件内自动创建 prop 对应的 data，方便组件内修改 prop 使用。解决了 vue2.0 中不允许组件内直接修改 prop 的设计。
2. 实现了组件外修改组件 prop 的双向绑定，子组件状态改变时将会通知父组件，同时父组件状态改变时也会通知子组件
3. 父组件使用 v-model 来帮定数据，子组件通过 value 来保存 v-model 的值
4. 父组件不需要写方法来同步子组件传来 v-model 的值，子组件也不再需要写过多的监听方法和将数据同步至父组件的方法

食用方法

1. 编写组件：在选项对象中增加 mixins: propsync 即可，如：

   <script>
   import propsync from 'vue-propsync'
   export default {
   name: 'hello',
   mixins: [propsync]
   }
   </script>

2. 调用组件：在调用组件的 templat 处，增加一个 v-model 来绑定数据，如：

   <modal v-model="isShow"></modal>
   <script>
   export default {
   name: 'app',
   data () {
     return {
       isShow: false
     }
   }
   }
   </script>

3. 子组件：如：

   <template>
   <div class="modal" :value="value" v-show="sync_value">
     <!-- 由于 v-model 一定要由 value 来接受传值，以上接受父组件数据为固定写法，复制粘贴即可，本插件将会为 value 创建一个副本 sync_value, 子组件需要绑定该变量 -->
     <div class="close" @click="cancel">测试</div>
   </div>
   </template>
   <script>
   import propsync from 'vue-propsync'
   export default {
   name: 'hello',
   mixins: [propsync],
   props: {
     value: {
       type: Boolean,
       default: false,
       isSync: true // 需要开启双向绑定的一定要写这句话，默认不会将所有的 prop 开启双向绑定
     }
   },
   methods: {
     cancel () {
       this.sync_value = false // 注意 props 是不能直接改变的，则需要改变本插件创建的副本即可
     }
   }
   }
   </script>