为什么点击按钮没反应？父子传值出问题了？

Question

父组件：
<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>

现点击按钮不会弹出对话框，错在哪？

Answer 1

楼主，你好！是因为你给子组件传的参数名字不对啊，子组件定义的是 props -> addBookOnoff ，父组件传的却是 dialog-form-visible。所以对话框不会展示出来。

---

如有帮助，麻烦点击下采纳，谢谢~