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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM