vue父子组件写法，数据传递，顺便封装 element-ui的弹窗组建

父组件如下:

<template>
  <div class="print">
    <el-button @click="bbclick">点击我弹出公共组件</el-button>
    <common-dialog :isShow="isShow" @closeDialogFather="getSonCancel"  @sureDialogFather="getSonSure"></common-dialog>
  </div>
</template>
<script>
  import commonDialog from './commonDialog.vue'
  export default {
    name: 'print',
    data () {
      return {
        isShow:false
      }
    },
    mounted(){
    },
    components:{
      commonDialog
    },


    methods:{
      bbclick(){
          this.isShow=true
      },
      getSonCancel(val){
        this.isShow=val
        console.log(this.isShow,'子组件点击取消后，父组件的isShow的值')
      },

      getSonSure(){
//        模拟确定按钮调取接口
        setTimeout(()=>{
            this.isShow=false
        },3000)
      },

}, } </script>

　　子组件如下：

<template>
  <div class="print">
      <p>我是弹窗组建</p>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>大哥好啊，getoutway bitch get out myway</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog">取 消</el-button>
    <el-button type="primary" @click="sureDialog">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>

  export default {
    name: 'print',
    props:{
      isShow:{
        type:Boolean,
        default:false
      },
    },
    data () {
      return {
        dialogVisible: this.isShow
      }
    },
    watch: {
      isShow () {
        this.dialogVisible = this.isShow;
        console.log(this.dialogVisible)
      }
    },
    mounted(){
    },

    methods:{

      closeDialog(){
          this.dialogVisible=false
          this.$emit('closeDialogFather',this.dialogVisible);
      },
      sureDialog(){
        this.$emit('sureDialogFather');
      },
    },
  }
</script>

　自己看瑟，

　

 

转载于:https://www.cnblogs.com/myfirstboke/p/10395620.html