vue-propsync-mixin
v1.0.1
Published
vue 组件的混合对象,主要用于组件编写时混入调用。
Downloads
4
Readme
vue-propsync-mixin
vue-propsync-mixin:vue组件的混合对象,主要用于组件编写时混入调用。
【主要功能】
- 实现了在组件内自动创建所有prop对应的data属性,方便组件内修改prop使用。解决了vue2.0中数据单向流的问题
- 实现了子组件修改组件prop,组件内自动同步修改到父组件的data属性。
【使用方法】
- 编写组件:在选项对象中增加 mixins:[propsync]即可,无需其他修改
- 调用组件:在调用的组件上新增
.sync
属性
【可配置忽略】
- 默认情况下,调用了本mixin的组件,会实现组件定义的所有的props,创建对应data变量,绑定双向watch。
- 若希望某个props进行绑定,则可在那个props中增加 propsync:true(可配置),默认所有props均为false
调用组件例:
<!-- 父组件 -->
<template>
<my-component :show.sync="show" />
</template>
<script>
export default {
data(){
return {
show:false
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<div v-show="sync_show">vue-propsync-mixin</div>
<button @click="onClick">按钮</button>
</div>
</template>
<script>
import propsyncMixin from 'vue-propsync-mixin'
export default {
name:'MyComponent',
mixins: [propsyncMixin],
props: {
show: {
type: Boolean,
default: false,
propsync: true
}
},
methods:{
onClick(){
this.sync_show = !this.sync_show
}
}
}
</script>