父传子
index.vue 父组件 props传给子
html
<el-button @click="editClientClick()" type="text" icon="el-icon-edit" size="small"></el-button>
<edit-client :dialogEditVisible="dialogEditVisible" @closeModal="changeDialogVisible"></edit-client>
js
<script>
import editClient from "./editClient" // 引入子组件
export default {
data() {
return {
dialogEditVisible:false,
}
},
components:{
editClient
},
methods: {
// 子组件回调,关闭父组件弹出窗
changeDialogVisible() {
this.dialogEditVisible = false;
},
// 点击按钮传参弹层
editClientClick() {
this.dialogEditVisible = true
},
}
</script>
editClient.vue 子组件 $emit 传给父
html
<el-dialog title="收货地址" :visible.sync="dialogEditVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelBtn()">取 消</el-button>
<el-button type="primary" @click="submitBtn()">确 定</el-button>
</div>
</el-dialog>
js
export default {
props: ['dialogEditVisible'], // 接受父组件传来的参数
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
}
},
methods: {
cancelBtn() {
// 传给父组件参数
this.$emit('closeModal', false)
},
submitBtn() {
this.$emit('closeModal', false)
}
}
}