vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)

<template>
  <div>
     <app-refund :dialogVisible="refundVisible"></app-refund>
    // 下面是一个按钮，点击此按钮会触发refundFunc，并显示弹窗
     <el-dropdown-item @click.native="refundFunc">点击此按钮显示弹窗</el-dropdown-item>
  </div>
</template>
<script>
import refund from '@/pages/customer/refund'
export default {
  components: {
     "app-refund":refund
  },
  data(){
    return {
      refundVisible:false
    }
  },
   methods: {
   refundFunc:function(){
    this.refundVisible=true
    }
    }
}
</script>

<template>
 <div>
 <el-dialog
   title="退余额"
  :visible.sync="dialogVisible"
  width="630px">
  </el-dialog>
 </div>
</template>
<script>
   export default { 
     props:{
     dialogVisible: {
      type:Boolean,
      default: false,
     }
    },
  }
</script>

<template>
  <div>
     <app-refund :dialogVisible.sync="refundVisible"></app-refund>
    // 下面是一个按钮，点击此按钮会触发refundFunc，并显示弹窗
     <el-dropdown-item @click.native="refundFunc">点击此按钮显示弹窗</el-dropdown-item>
  </div>
</template>

<template>
 <div>
 <el-dialog
   title="退余额"
  :visible.sync="dialogVisible"
  :before-close="hidePanel"
  width="630px">
  </el-dialog>
 </div>
</template>
<script>
   export default { 
     props:{
     dialogVisible: {
      type:Boolean,
      default: false,
     }
    },
      methods: { 
     // 利用sync进行数据双向绑定，子组件修改dialogVisible的值，并响应到父组件
     hidePanel() {
       this.$emit('update:dialogVisible', false)
     }
    },
  }
</script>