码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-23 22:24:12      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:事件   day   flag   syn   mit   $set   put   receive   filter   

部分代码如下:

父组件:

  <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

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

标签:事件   day   flag   syn   mit   $set   put   receive   filter   

原文地址:https://www.cnblogs.com/llcdbk/p/12088462.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!