vue2中父子组件数据双向绑定

vue2中父子组件数据双向绑定

1、当父组件用自定义属性传递值时，后面需要添加.sync，这样当子组件更新的时候，父组件中的状态也会随之进行更新

<ImportFile :visible.sync="isShowImport"></ImportFile>

2、子组件

 <template>
  <el-dialog
  title="导入"
  :visible="visible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="handleClose">确 定</el-button>
  </span>
 </el-dialog>
</template>

<script>
export default {
  props:{
    visible:{
      type:Boolean,
      default:() =>{
        return false
      },
      required:true
    }
  },
  methods:{
    handleClose(){
      this.$emit('update:visible',false)
    }
  }
}
</script>