vue+ts修改父组件属性的写法。

部分代码如下:

父组件:

  <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

 

vue-property-decorator用法

https://www.jianshu.com/p/d8ed3aa76e9b

猜你喜欢

转载自www.cnblogs.com/llcdbk/p/12088462.html