feat: 修复pigrid父子组件无法联动问题

components/pi-grid-item/index.vue

@@ -15,13 +15,16 @@
 </template>
 
 <script>
+import { childInit } from '../../mixin/props-sync'
 import { getConfig } from '../../config'
 
 const TAG = 'PiGridItem'
 const { gridItem } = getConfig()
 
 export default {
   name: TAG,
+  // 混入自定义样式customStyle和customClass
+  mixins: [childInit('PiGrid')], // 注入value与val，进行双向绑定
   props: {
     // 当前宫格索引
     index: {
@@ -89,16 +92,14 @@ export default {
     }
   },
   data() {
-    return {
-      parentData: {}
-    }
+    return {}
   },
   computed: {
     getGap() {
-      return this.parentData.gap || this.gap
+      return this.inheritProps.gap || this.gap
     },
     getCol() {
-      const col = this.parentData.col ? this.parentData.col : this.col
+      const col = this.inheritProps.col ? this.inheritProps.col : this.col
       return parseInt(col, 10)
     },
     getRowGapWidth() {
@@ -108,10 +109,10 @@ export default {
       return `calc((100% - ${this.getRowGapWidth}) / ${this.getCol})`
     },
     getSquare() {
-      return this.parentData.square || this.square
+      return this.inheritProps.square || this.square
     },
     getBorder() {
-      return this.parentData.border || this.border
+      return this.inheritProps.border || this.border
     },
     itemStyle() {
       const gap = this.$pi.common.addUnit(this.getGap)
@@ -139,18 +140,10 @@ export default {
       return clazz.join(' ')
     }
   },
-  inject: {
-    piGrid: { default: undefined }
-  },
   created() {
-    this.init()
     this.valid()
   },
   methods: {
-    init() {
-      if (!this.piGrid) return
-      this.parentData = { ...this.piGrid.$props, ...this.piGrid.$data }
-    },
     valid() {
       if (this.getGap && this.index === undefined) {
         console.warn(TAG, '当设置gap的时候，请把当前迭代器的索引传递到index属性，否则宽度计算有误')

components/pi-grid/index.vue

@@ -5,13 +5,15 @@
 </template>
 
 <script>
+import { parentInit } from '../../mixin/props-sync'
 import { getConfig } from '../../config'
 
 const TAG = 'PiGrid'
 const { grid } = getConfig()
 
 export default {
   name: TAG,
+  mixins: [parentInit(['border', 'col', 'gap', 'square', 'hoverClass'])],
   props: {
     // 自定义样式，对象形式（默认值：{}）
     customStyle: {
@@ -47,22 +49,12 @@ export default {
       type: [String, Number],
       default: grid.gap
     },
-    // 宫格对齐方式，靠左，居中，还是靠右
-    align: {
-      type: String,
-      default: grid.align
-    },
     // 宫格按压时的样式类，"none"为无效果
     hoverClass: {
       type: String,
       default: grid.hoverClass
     }
   },
-  provide() {
-    return {
-      piGrid: this
-    }
-  },
   computed: {
     showBorder() {
       return this.border && !this.gap

config/grid.js

@@ -5,6 +5,5 @@ export default {
   gap: 0, // 宫格之间间隔，（默认：0）
   square: false, // 宫格是否以正方形撑开
   border: true, // 是否显示边框（边框宽度，颜色通过scss变量声明，如需单独定制，请使用::v-deep）
-  align: 'left', // 宫格对齐方式，靠左，居中，还是靠右
   hoverClass: 'pi-hover-class' // 宫格按压时的样式类，"none"为无效果
 }