场景：在父组件的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>