I really hope that we can contact more new things in the project , Practice leads to true knowledge , For programming, it's more hands-on , More summary , Think more , In order to better avoid the pit , Because you will find a lot of what you think is not what you think .


PC In the end project , It's always been used Element UI
, Recent function iteration , There is a pop-up window for selecting experts to apply to multiple pages , So we need to dialog Encapsulation for reuse , stay Element-UI On the basis of , yes dialog
Packaging , The most important is the control of an attribute value Namely  visible, about dialog What to display in , According to the general components can be passed .

Core issues

el-dialog Of visibile Property value Only one of the parent or child components can be modified , Property values passed from parent component to child component cannot be modified directly in child component , This is VUE
I don't mind . If you modify it directly in the subcomponent, the following error will be reported .

vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since
the value will be overwritten whenever the parent component re-renders.
Instead, use a data or computed property based on the prop's value. Prop being
mutated: "dialogFormVisible"

found in

---> <MyDialog> at src/views/packageDialog/MyDialog.vue
       <DialogDemo> at src/views/packageDialog/dialogDemo.vue
         <App> at src/App.vue

Problem solving

Parent component passed to dialog Of subcomponents Property value Not directly used in visible Property value , Take another value to synchronize with it

stay dialog In subcomponents adopt watch Listen to the change of the value passed in the parent component , Synchronize

Need to close in subcomponent dialog Time , Also trigger the time in the parent component , Modify the control defined in the parent component dialog Values displayed

The core code is as follows :

    dialogShow(val) {

      this.dialogFormVisible = val



  methods: {

    closeDialog() {

      this.$emit('dialogShowChange', false)



whole Demo code

Parent component :
<template> <div class="dialogDemoContainer"> <el-button type="primary"
@click="dialogShowChange(true)">show dialog</el-button> <div v-if="dialogShow"
class="dialogBox"> <myDialog :dialogShow="dialogShow"
@dialogShowChange="dialogShowChange"></myDialog> </div> </div> </template>
<script> import myDialog from './MyDialog.vue' export default { data() { return
{ dialogShow: false } }, components: { myDialog }, methods: {
dialogShowChange(val) { this.dialogShow = val } } } </script> <style
lang="scss" scoped> .dialogDemoContainer { text-align: center; padding: 20px;
.dialogBox { text-align: left; } } </style>
dialog Subcomponents :
<template> <el-dialog title=" Receiving address " :visible.sync="dialogFormVisible"
@close="closeDialog"> <el-form :model="form"> <el-form-item label=" Activity name "
:label-width="formLabelWidth"> <el-input v-model="form.name"
autocomplete="off"></el-input> </el-form-item> <el-form-item label=" zone of action "
:label-width="formLabelWidth"> <el-select v-model="form.region"
placeholder=" Please select active area "> <el-option label=" Region one " value="shanghai"></el-option>
<el-option label=" Region 2 " value="beijing"></el-option> </el-select>
</el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button
@click="closeDialog"> take eliminate </el-button> <el-button type="primary"
@click="closeDialog"> Yes set </el-button> </div> </el-dialog> </template> <script>
export default { props: { dialogShow: { type: Boolean, default: false } },
data() { return { dialogFormVisible: this.dialogShow, form: { name: '', region:
'', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' },
formLabelWidth: '120px' } }, watch: { dialogShow(val) { this.dialogFormVisible
= val } }, methods: { closeDialog() { this.$emit('dialogShowChange', false) } }
} </script> <style lang="scss" scoped> </style>
final , Remember the nature of the problem , And this kind of problem needs to be solved , Hope that the continuous progress of mining pit .

©2020 ioDraw All rights reserved
Java exercises 1: Simply define a car class New photo album app launched by Microsoft : Using cross platform framework React Native to write Chapter two Fundamentals of programming Programming exercises pandas Time order of webpack Code segmentation import()Vue slot slot: Default slot , Named slot , Scope slot Fundamentals of data analysis ——R language ( Processing missing values )C++ Implementation of matrix meteor shower effect PostMan Advanced Usage , Interface MD5+Secret autograph Sign The 12th Blue Bridge Cup B group C/C++ Provincial competition