部分代码如下：
父组件：
<coupon :modifyFlag.sync="flag" />
data() {
return {
flag:0
};
子组件:
<div class="receive" @click="changeTest">领取</div>
import Vue from "vue";
import { Component, Prop, Emit } from "vue-property-decorator";
@Component({
name: "Coupon",
filters: {
timeFormat(input: any) {
input = input.replace(/\-/g, "/"); //横杠的时间不能被识别，所以要替换程斜杠
let time = new Date(input);
let year = time.getFullYear(); //年
let month = time.getMonth() + 1; //月
let day = time.getDate(); //日
return `${year}年${month}月${day}日`;
}
}
})
export default class Coupon extends Vue {
//定义props，括号的是JS类型，冒号后是TS类型，叹号是必传值，问号是可选值
@Prop({ default: [] }) list!: [];
//这里可以正常定义生命周期函数
created() {
this.list.forEach((item: any) => {
this.$set(item, "showRole", false);
});
}
changeTest(){
this.changeFlag(20);
}
//如果有参数但是元素事件上没有参数的时候，可以单独封装一下，交给调用函数传参
@Emit(‘update:modifyFlag‘)
changeFlag(n:number){
n=19;
console.log(n);
}
}
参考：
彻底明白VUE修饰符sync
https://www.jianshu.com/p/d42c508ea9de
vue-property-decorator用法
https://www.jianshu.com/p/d8ed3aa76e9b
原文地址：https://www.cnblogs.com/llcdbk/p/12088462.html