Vue中sync修饰符的用法

场景：在父组件的data中定义一个变量，希望在子组件中改变这个变量，并传递给父组件

父组件：

<template>
    <div>
        <select-dialog
            v-if="showDialog"
            :show.sync="showDialog"
            :select.sync="selectResult"
        ></select-dialog>
    </div>
</template>

<script>
import SelectDialog from './SelectDialog';
export default {
     
    data() {
     
        return {
     
            showDialog: false,
            selectResult: null
        };
    },
    components: {
     
        SelectDialog
    }
};
</script>

子组件：

<template>
    <el-dialog
        :visible.sync="dialogTableVisible"
        title="请选择"
        :before-close="beforeClose"
    >
        <el-input v-model.trim.lazy="input" placeholder="输入ID"></el-input>
        <div>
            <div>
                <el-table :data="tableData">
                    <el-table-column label="ID">
                        <template v-slot="scope">{
     {
      scope.row.id }}</template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button type="text" @click="handleSelectionChange(scope.row)" >选择</el-button>
                      </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div v-if="false" slot="footer">
            <el-button type="primary" @click="comfirm">确 定</el-button>
            <el-button @click="$emit('update:show', false)">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
     
    data() {
     
        return {
     
            dialogTableVisible: true,
            tableData: [],
            input: '',
            currentSelection: null
        };
    },
    methods: {
     
        beforeClose(done) {
     
            this.$emit('update:show', false);
            done();
        },
        comfirm() {
     
            if (this.currentSelection) {
     
                this.$emit('update:show', false);
                this.$emit('update:select', this.currentSelection);
            } else {
     
                this.$message({
     
                    message: '请选中一个ID',
                    type: 'warning'
                });
            }
        },
        handleSelectionChange(val) {
     
            this.currentSelection = val;
            this.comfirm();
        }
};
</script>