https://github.com/vxhly/vue-propsync
vue-propsync：vue 组件的混合对象，主要用于组件编写时混入调用。
https://github.com/vxhly/vue-propsync
propsync sync vuejs
Last synced: about 1 month ago
JSON representation
vue-propsync：vue 组件的混合对象，主要用于组件编写时混入调用。
- Host: GitHub
- URL: https://github.com/vxhly/vue-propsync
- Owner: vxhly
- License: mit
- Created: 2018-02-17T15:09:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-28T09:36:31.000Z (over 7 years ago)
- Last Synced: 2024-04-24T20:13:54.948Z (about 1 year ago)
- Topics: propsync, sync, vuejs
- Language: JavaScript
- Size: 7.81 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-propsync
[](https://www.npmjs.com/package/vue-propsync) [](https://github.com/vxhly/vue-propsync/network) [](https://github.com/vxhly/vue-propsync/stargazers) [](https://npmjs.org/package/vue-propsync) [](https://github.com/vxhly/vue-propsync/blob/master/LICENSE)
> vue-propsync：vue 组件的混合对象，主要用于组件编写时混入调用。
## Thanks
- [Vue minxins 官方文档](https://cn.vuejs.org/v2/api/#mixins)
- [propsync.js](https://github.com/xxcanghai/cnblogsFiles/blob/master/vue-mixins/propsync.js)
- [Vue2 利用 v-model 实现组件props双向绑定的优美解决方案](https://segmentfault.com/a/1190000008662112)
## Introduction and Use
### 主要功能
1. 实现了在组件内自动创建 prop 对应的 data，方便组件内修改 prop 使用。解决了 vue2.0 中不允许组件内直接修改 prop 的设计。
2. 实现了组件外修改组件 prop 的双向绑定，子组件状态改变时将会通知父组件，同时父组件状态改变时也会通知子组件
3. 父组件使用 v-model 来帮定数据，子组件通过 value 来保存 v-model 的值
4. 父组件不需要写方法来同步子组件传来 v-model 的值，子组件也不再需要写过多的监听方法和将数据同步至父组件的方法
### 食用方法
1. 编写组件：在选项对象中增加 mixins: [propsync] 即可，如：
```html
import propsync from 'vue-propsync'
export default {
name: 'hello',
mixins: [propsync]
}
```
2. 调用组件：在调用组件的 templat 处，增加一个 v-model 来绑定数据，如：
```html
export default {
name: 'app',
data () {
return {
isShow: false
}
}
}
```
3. 子组件：如：
```html
测试
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 是不能直接改变的，则需要改变本插件创建的副本即可
}
}
}
```