Vue2 父子组件消息传递，实现消息弹窗

Vue2 父子组件消息传递，实现消息弹窗

父子组件传递消息

就以打开一个弹窗为例

父组件代码

<template>
  <div>
    <el-button type="primary" @click="enable = !enable" plain>主要按钮</el-button>
    <hello-world @close="enable=false" :enable="enable" @change="change"></hello-world>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  components:{
    HelloWorld
  },

  data() {
    return {
      enable: false,
    }
  },
  methods:{
    change(form){
      console.log(`表单数据`,form)
    }
  }

}
</script>

子组件代码

<template>
<div>
  <el-dialog
  title="提示"
  :visible="enable"
  width="30%"
  @close="handlerClose"
  >
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="测试数据">
    <el-input v-model="form.data"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handlerClose">取 消</el-button>
    <el-button type="primary" @click="setStatus">确 定</el-button>
  </span>
</el-dialog>
<p>{{enable}}</p>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props:{
    enable:{
      type:Boolean,
      default:false,
      require:true
    }
  },
  data() {
      return {
        //dialogVisible: false,
        form:{
          name:'',
          data:''
        }
      };
    },
    methods:{
      setStatus(){
        this.$emit('change',this.form)
        this.handlerClose()
      },
      handlerClose(){
        this.$emit('close',false)
      }
    }
}
</script>

总结一些小技巧：在vue中@close可以关闭窗口，具体看文档，这样我们就以通过$emit来实现对父子组件的控制，其实也可以通过$ref来实现当不推荐这样做