Why didn't you respond when you clicked the button? Is there something wrong with the value passed by father and son?

:
<template>
     <div class="btnHandle">
        <el-button type="info" size="small" @click="addBook"></el-button>
       </div>
       <add-edit-book 
          :AddBookTitle="AddBookTitle" 
          :dialog-form-visible="addBookOnoff"
          @dialog-cancel="cancelRegister"
          >
        </add-edit-book>
    </div>
</template>

<script>
import AddEditBook from "@/book/bookRuleManageMent/addeditBookDialog"
export default {
  name: "BookCategory",
  components: {
      AddEditBook
  },
  data () {
    return {
        AddBookTitle: "",
        addBookOnoff: false
    }
  },
    methods: {
        addBook () 
            this.AddBookTitle = "",
            this.addBookOnoff = true
        }

    }
}
</script>
:
    <template>
    <div class="addeditBookDialog">
        <el-dialog 
          class="addParts" 
          :visible.sync="addBookOnoff"
          :before-close="cancelRegister"
          :top="top"
          :title="AddBookTitle"
          width="450px"
        >
            <el-form :model="addeidtForm" :rules="rules" ref="addeidtForm" :label-position="labelPosition" label-width="100px" :inline="true">
                <el-form-item label="" prop="bookName">
                    <el-input v-model="addeidtForm.bookName" clearable></el-input>
                </el-form-item>
                <el-form-item label="" prop="bookDesc">
                    <el-input v-model="addeidtForm.bookDesc" clearable></el-input>
                </el-form-item>
                <el-form-item label="" prop="bookCategory">
                    <el-select v-model="addeidtForm.bookCategory" placeholder=""  clearable>
                         <el-option v-for="item in bookCategory" :key="item.value" :label="item.label" value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="bookPlace">
                    <el-select v-model="addeidtForm.bookPlace" placeholder=""  clearable>
                         <el-option v-for="item in bookPlaces" :key="item.value" :label="item.label" value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="bookShelf">
                    <el-input v-model="addeidtForm.bookShelf" clearable></el-input>
                </el-form-item>
                <el-form-item label="">
                   <el-cascader
                    :options="manageApartments"
                    v-model="addeidtForm.manage"
                    filterable
                    clearable
                    change-on-select
                    @change="handleChange">
                    </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelRegister"> </el-button>
                <el-button type="primary" @click="addBookOnoff = false"> </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "AddeditBookDialog",
    props: {
         addBookOnoff: {
            type: Boolean,
            default: false
        }
    },
    
    methods: {
        cancelRegister () {
            this.$emit("dialog-cancel")
        }
    }
}
</script>

clipboard.png
clicking the button now will not pop up the dialog box. What"s wrong?

Aug.16,2021

Hello, landlord! Because the parameter name passed by your to the child component is not correct , the child component defines props-> addBookOnoff , while the parent component passes dialog-form-visible . So the dialog box will not be displayed.

< hr >

if it is helpful, please click to adopt it, thank you ~

Menu