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

Posted 2021-03-21 llcdbk

部分代码如下：

父组件：

  <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