组件如何复用？

Question

需求是这样子，10个按钮，每个按钮有各自的ID，点击按钮同时只出现一个弹窗，所有按钮共用这个弹窗。
打开弹窗的时候由点击按钮的ID调接口查询弹窗内容，弹窗内容都是多个checkbox，现在要在勾选checkbox的时候，各自按钮ID对应的弹窗互不干扰，且同一个ID对应的弹窗能重复打开修改里面的勾选状况并保存上次的修改状况。
然后页面最下角有一个提交按钮，用来保存所有勾选的checkbox集。
想不到什么好的做法，求大神们给点意见。

Answer 1

这个弹窗是个组件，按钮上的id只是传值给这个组件而已，如果你按钮ID值是固定的，那就好办：

关键是对象存取操作：

假设id有1、2、3 ，每次你checkbox改变数据记得localStorage.setItem存一下就行了，新开弹窗就重新localStorage.getItem取覆盖data()

data() { 
    return {
        ids: {
            1: {...}, //喜欢在里面存什么都行
            2: {...},
            3: {...},
        }
    }
}
methods() {
    checkboxSetItem() {
        // 用localStorage 存起来，为啥存起来？防止弹窗组件销毁吧
        window.localStorage.setItem('ids',JSON.stringify(this.ids))
    },
   getItem() {
        // 获取本地数据，每次打开弹窗要跑一遍
        const ids = window.localStorage.getItem('ids')
        if(ids){
            // 这里有个坑，数据响应问题，要注意`this.ids`里头要先有那些1、2、3属性
            this.ids = JSON.parse(ids) 
        }
    }
}

//提交数据啥的成功后还记得销毁

window.localStorage.removeItem('ids')

为什么this.ids要先有属性：vue的对象更改检测注意事项

Answer 2

iView的modal和Button组件够你使用了。

Answer 3

将checkbox与按钮绑定，每个按钮对象保存多个checkbox数据，弹窗只作为一个载体，显示时将相应按钮的数据传入就行。

let buttons = [{
    id: 0,
    data: [{checked: true},{checked: false}]
}, {
    id: 1,
    data: null
}, ...]

function onButtonClick(button) {
    this.modalShow = true
    this.modalData = button.data
    if (!button.data) {
        getData().then(data => {
            this.modalData = button.data = data
        })
    }
}

Answer 4

这样吧，做一个数据缓存，那么数据怎么缓存？
1、让其与对应的Button相关联，将数据挂载到Button元素上，然后通过元素获取到对应的值。
http://nuysoft.iteye.com/blog...
欢迎：具体做法