Vue + TS笔记：sync修饰符和 @Emit(‘upate:visible‘)

父组件

<Father>
	<Child visible.sync="showChild" ></Child>
</Father>

子组件

// Child 组件
<template>
	<div class="child-component" v-show="visible">
		<i class="icon-close" @click="closeHandle"></i>
	</div>
</template>

@Emit用法

// Child 组件
import { Emit, Prop } from "vue-property-decorator";

// Child 组件
// 弹窗是否显示
@Prop({ default: false })
visible!: boolean;


@Emit('update:visible') 
updateVisible(bool:boolean) {
    return bool;
}

closeHandle() {
	this.updateVisible(false)
}

在父组件引入子组件的时候，要在子组件的属性（如：visible）后加上.sync，才能让子组件内部的@Emit(‘update:visible’) 生效。update:xxx，xxx可以是子组件prop中的任意属性，并在父组件中引入的子组件的属性xxx后，加上.sync。如 <Child xxx.sync="属性值"></Child>

相当于js:

// Child 组件
// 弹窗是否显示
props: {
	visible: {
		type:Boolean,
		default: false
	}
}

methods: {
	updateVisible(bool) {
		this.$emit('update:visible',bool)
	}
	closeHandle() {
		this.updateVisible(false)
	}
}

一些资料：

彻底明白VUE修饰符sync：https://www.jianshu.com/p/d42c508ea9de