父子组件

父子组件数组同步

by xie shine

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script id="child" type="x-template">
    <el-input v-model="value.name"
              :on-icon-click="handleIconClick"
              :icon="icon"
              readonly>
    </el-input>
</script>
<div id="parent">
    出库仓库：{{JSON.stringify(warehouse)}} <br/>
    <child @popup="openDialog" v-model="warehouse"></child>
    <el-dialog title="提示" v-model="visible" size="tiny">
        <el-table :data="warehouses" @current-change="handleCurrentChange" highlight-current-row style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="180">
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
    </el-dialog>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");
.el-input {
  width: 300px;
  margin-bottom: 20px;
}

JavaScript

//父子组件直接绑定即可，只在父组件管理数据
    var Child = {
        template: '#child',
        data () {
            return {}
        },
        props: {
            value: {
                type: Object
            }
        },
        computed: {
            icon () {
                return this.value.name ? 'close' : 'more'
            }
        },
        methods: {
            handleIconClick () {
                this.$emit('popup',this.icon);
            }
        }
    };

    new Vue({
        el: '#parent',
        data () {
            return {
                visible: false,
                warehouse: {},
                row: {},
                warehouses: [
                    {
                        id: 1,
                        name: '仓库一'
                    }, {
                        id: 2,
                        name: '仓库二'
                    }, {
                        id: 3,
                        name: '仓库三'
                    }
                ]
            }
        },
        components: {
            Child
        },
        methods: {
            openDialog (ico) {
                if (ico === 'close') {
                    this.warehouse = {};
                    this.row = {};
                } else {
                    this.visible = true
                }
            },
            handleCurrentChange (row) {
                this.row = row
            },
            confirm () {
                this.warehouse = this.row;
                this.close()
            },
            close () {
                this.visible = false
            }
        }
    })