Vue使用

1、循环遍历数组

for (let i = 0, len = list.length; i < len; i++) {
    const item = list[i]
    item.style = { ...commonStyle, ...item.style }
    list[i] = { ...commonAttr, ...item }
}

循环遍历+判断对象是否含有key

this.componentData.forEach(component => {
    if (component.hasOwnProperty('hussar')) {
        console.log('该组件包含hussar')
        this.canvasStyleData.slots.default.push(component.hussar)
        console.log(this.canvasStyleData)
    }
})


2、数组删除元素

let index = this.canvasStyleData.slots.default.findIndex(defaultData => {
    if (defaultData.instanceKey === component.style.instanceKey) {
        return true
    }
})
this.canvasStyleData.slots.default.splice(index, 1)

3、往json对象中添加属性
this.$set(this.tableData,'time','2023-02-09') 

4、state中添加属性：直接赋值即可

state.canvasStyleData.slots.default[index].datas.datamodel = state.datamodel

5、更新设置复杂动态的state

Vue.set(state.canvasStyleData.resReferencesIndex, state.datamodel.dataModelId + comp.instanceKey + 'datamodel', state.resReferencesIndex)

6、父组件通过方法传值控制子组件
（1）父组件中引入使用子组件<TableEditDialog>，如下图：

 

 

其中，需要传递变量"isShowTableEditDialog"用来控制对话框是否显示，其中的“v-if="isShowTableEditDialog"“用来在父组件中控制该子组件是否渲染，默认false，变量定义如下图：

 

 上述函数“closeTableEditDialog”是在父组件中定义的（子组件也定义了同名函数），用来改变"isShowTableEditDialog"的值，如下图：

 

 

（2）子组件中如下

 

 

 子组件的“:visible.sync="isShowTableEditDialog"”是通过props从父组件中取的值，即将上面步骤父组件的“isShowTableEditDialog”与这里子组件的“isShowTableEditDialog”绑定到了一起，父组件的更新改变会同步到子组件这里来，props定义如下图所示：

 

 

然后是在子组件中关闭按钮监听函数是通过调用子组件中的“closeTableEditDialog”函数来调用父组件的该函数，完成父组件该变量值的更新，如下：

 

 

 

总结，核心是调用了closeTableEditDialog方法，父子组件通过在子组件中props绑定传值，由于props是只读的，更新需要在父组件完成，故子组件只能通过同名方法使用“$emit”回调父组件的该方法，从而改变父组件中的data中的“isShowTableEditDialog”变量，父组件该变量改变后，自然会传递到子组件，这样也就生效了。