vue-propsync
0.1.3 • Public • Published vue-propsync
vue-propsync：vue 组件的混合对象，主要用于组件编写时混入调用。
Thanks
Introduction and Use
主要功能
- 实现了在组件内自动创建 prop 对应的 data，方便组件内修改 prop 使用。解决了 vue2.0 中不允许组件内直接修改 prop 的设计。
- 实现了组件外修改组件 prop 的双向绑定，子组件状态改变时将会通知父组件，同时父组件状态改变时也会通知子组件
- 父组件使用 v-model 来帮定数据，子组件通过 value 来保存 v-model 的值
- 父组件不需要写方法来同步子组件传来 v-model 的值，子组件也不再需要写过多的监听方法和将数据同步至父组件的方法
食用方法
- 编写组件：在选项对象中增加 mixins: [propsync] 即可，如：
<script>
import propsync from 'vue-propsync'
export default {
name: 'hello',
mixins: [propsync]
}
</script>
- 调用组件：在调用组件的 templat 处，增加一个 v-model 来绑定数据，如：
<modal v-model="isShow"></modal>
<script>
export default {
name: 'app',
data () {
return {
isShow: false
}
}
}
</script>
- 子组件：如：
<template>
<div class="modal" :value="value" v-show="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
}
},
methods: {
cancel () {
this.sync_value = false
}
}
}
</script>
Package Sidebar
Install
Weekly Downloads