vue子组件修改父组件中变量的值——实现子组件控制父组件弹出对话框

本文内容参考链接：https://www.cnblogs.com/padding1015/p/7878741.html

弹出框使用ElementUI中表单对话框的样式，实现点击用户注册后，header组件获取main组件中dialogFormVisible的值来控制main组件中表单对话框的弹出。

如果直接将表单对话框放在header组件，表单因为header长宽太小变形了，于是，就将对话框放在父组件中。父组件home主要包含<Header/><Main/><Footer/>这三部分，对话框放在Main中。

下面开始讲述如何实现：

因为父组件要有值才能传到子组件，因此：

第一步：先在父组件中定义一个变量，通过true和false控制表单对话框是否显示。

 

第二步：在父组件中给子组件Header绑定子组件需要操作的变量

父组件给子组件绑定值之后，子组件要接收父组件中传来的值，因此： 

第三步： 在header子组件定义props:['需要接收父组件的变量名']

第四步：子组件接收到值之后，尝试使用看是否接收成功，在子组件中使用 {{this.dialogFormVisible}}测试是否接收成功，页面显示内容表示接收成功。

子组件修改变量后，要传变量的值回父组件，这里使用$emit函数传值。

第五步：在子组件的页面使用v-on:click=""绑定点击用户注册的事件函数reqister，然后在methods中编写register函数。

$emit的作用是让registerBoxStatus这个自定义事件发射，这里注意，"自定义事件名" 一定要用引号括起来，不然会报错is not defined

子组件发射自定义事件成功后，要父组件中要进行相应。

第六步：使用v-on:发射的事件名称="父组件接收变量后需要需要进行的函数操作($event)"，自定义事件和他的对接人（同名事件）交接，同名事件执行早在这里准备好的另一个父组件里边的函数register，并且把自定义事件从子组件中带来的参数转交接，给了这个函数register的$event（固定名字，不能改）参数。

然后在父组件中编写接收子组件发射的自定义事件之后进行操作的register函数。

最后测试成功，打开对话框后，左上角的值变为true。

最后附上实现代码：

Home.vue的代码如下：

<template>
    <div>
        <Header v-bind:dialogFormVisible = "dialogFormVisible" v-on:registerBoxStatus="register($event)"/>
        <!--注册对话框-->
        <div>
            <el-dialog title="测试" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="XXX" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="XXX" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="XXX">
                            <el-option label="XXX" value="shanghai"></el-option>
                            <el-option label="XXX" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<style>
    .txt{
        text-indent: 2em;
        font-size: 12px;
        line-height: 20px;
        color: grey;
        text-align: left;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 5; /** 显示的行数 **/
        overflow: hidden;  /** 隐藏超出的内容 **/
    }
    .item{
        float: left;
        height: 160px;
        width: 350px;
        overflow: hidden;
    }
    .InnerItem2{
        margin: 0;
        width: 500px;
        text-align: center;
        overflow: hidden;
    }

    .border{
        color: deepskyblue;
        box-shadow:1px 1px 5px #333;
        -webkit-box-shadow:1px 1px 5px #333;
        -moz-box-shadow:1px 1px 5px  #333;
    }
    .BookItem{
        margin: 0;
        width: 1000px;
        margin: 0 auto;
    }
    .InnerItem2 span{
        font-weight: 400;
        margin: 0 10px;
    }
    .InnerItem2 .name{
        float: left;
        color: deepskyblue;
    }

    .InnerItem2 a{
        text-decoration: none;
    }

    .lastChapter{
        color: deepskyblue;
    }

    .type{
        float: left;
        color: coral;
    }

    .InnerItem2 .author{
        float: right;
        color: #B3B3B3;
    }
    .InnerItem2 hr{
        border: 1px solid #88C6E5;
        overflow: hidden;
        margin: 0 5px;
    }
    .item2{
        float: left;
        height: 400px;
        width: 500px;
        overflow: hidden;
        padding: 0;
    }
    .item2 .txt{
        -webkit-line-clamp: 4; /** 显示的行数 **/
    }
    .item2 .h2txt{
        font-size: 14px;
        font-weight: bold;
        padding-left: 5px;
        line-height: 20px;
        height: 20px;
        overflow: hidden;
        margin-right: 2px;
        color: deepskyblue;
        box-shadow:1px 1px 5px #333;
        -webkit-box-shadow:1px 1px 5px #333;
        -moz-box-shadow:1px 1px 5px  #333;
    }

    .item2 .image{
        height: 130px;
        width: 96px;
    }

    .item2 .image img{
        float: left;
        height: 120px;
        width: 96px;
    }
    .item .image img{
        float: left;
        height: 150px;
        width: 120px;
    }
    .img-shadow{
        background:#000;
        box-shadow:1px 1px 5px #333;
        -webkit-box-shadow:1px 1px 5px #333;
        -moz-box-shadow:1px 1px 5px  #333;
    }
    .image{
        float: left;
        height: 150px;
        width: 120px;
        margin: 0 10px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        /*line-height: 200px;*/
    }
    .el-container{
        margin: 0;
        padding: 0;
    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: left;
        padding: 0;
        margin: 0;
        /*min-height: 10px;*/
    }
    .dt-txt span{
        color: #B3B3B3;
        float: right;
        font-weight: 400;
    }
    .dt-txt a{
        /*float: left;*/
        /*font-weight: 400;*/
        text-decoration: none;
        color: deepskyblue;
    }
    .heat-books{
        width: 1100px;
        height: 300px;
        margin: auto;
    }
    .books-type{
        margin: 0 auto;
        width: 1500px;
        height: 320px;
    }
    .hr-link{
        border: 1px solid #88C6E5;
        overflow: hidden;
        margin: 5px auto;
    }
</style>
<script>
  import Header from '../views/Header.vue';
  export default {
    name: 'home',
    props:{
    },
    data(){
      return{
          //表单变量
          dialogFormVisible: false,
          form: {
              name: '',
              region: '',
              date1: '',
              date2: '',
              delivery: false,
              type: [],
              resource: '',
              desc: ''
          },
          formLabelWidth: '120px',

      }
      },
    components: {
      Header
    },
      created(){
      },
    beforeMount(){

    },
     mounted(){

      },
    methods:{
        register(msg){
          this.dialogFormVisible = msg;
        },

    }
  }
</script>

Header.vue的代码如下：

<template>
    <div>
        {{this.dialogFormVisible}}
            <div class="grid-content bg-purple" type="flex">
                <span v-on:click="register" class="pointer">用户注册</span>
            </div>
    </div>
</template>
<script>
    export default {
        name: 'Header',
        props:['dialogFormVisible'],
        inject:['reload'],
        data(){
            return{
            }
        },
        components: {},
        mounted(){
        },
        methods:{
            register(){
                this.$emit("registerBoxStatus",!this.dialogFormVisible)
            }
        }
    }
</script>
<style lang="postcss" scoped>
    .pointer{
        cursor: pointer;
    }
    *{
        margin:0;
        padding:0;
    }

    .el-header a{
        text-decoration: none;
        margin: 20px;
        color: gray;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 20px;
        padding: 10px 0px;
        overflow: hidden;
    }


</style>