部分代码如下:

父组件:

  <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修改父组件属性的写法。的更多相关文章

  1. vue中子组件直接修改父组件prop属性bug

    在有些时候,子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题. 比如,父组件传过来的一个对象 checkBoxObj: checkBoxObj:{ checked: false } ...

  2. 14. VUE 子组件修改父组件的值

    在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的. 子组件 修改 传递数据 直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接 ...

  3. vue 子组件修改父组件传来的props值,报错

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...

  4. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  5. 【VUE】7.组件通信(二)子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  6. vue—子组件修改父组件的值

    如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...

  7. vue 子组件修改父组件变量问题

    昨天遇到一个这样的场景, 主页面引用了一个子页面,子页面有个Redio选择,2个选项. 默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选. 开始没什么问题,页面都摆上 ...

  8. React-Native子组件修改父组件的几种方式,兄弟组件状态修改(转载)

    子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...

  9. Vue-自定义事件之—— 子组件修改父组件的值

    如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...

随机推荐

  1. java int转Short

    使用short(xx) problemMultipleChoiceDO.setExamCount((short)0);//在数据库中是smallint类型

  2. Delphi7所使用的WinAPI大全(摘自VCL源码,一共1200个函数)

    经过我整理的,去掉了A和W的重复.虽然没写注释,但以后要一个一个研究.有这些WINAPI就够用了. kernel32 = 'kernel32.dll'; gdi32 = 'gdi32.dll'; us ...

  3. Dire Wolf——HDU5115(区间DP)

    题意 就是有一对狼,每个狼有初始的攻击力,并且还能给左右两边的狼提供攻击力加成,当冒险家杀死一头狼的时候他也会受到这个狼目前攻击力的伤害 实例解析 33 5 78 2 0 有三头狼,刚开始第二头狼给他 ...

  4. C#GC垃圾回收和析构函数和IDisposable的使用

    一,什么是GC 1,GC是垃圾回收器,一般来说系统会自动检测不会使用的对象或变量进行内存的释放,不需要手动调用,用Collect()就是强制进行垃圾回收,使内存得到及时的释放,让程序效率更高. 2,G ...

  5. CentOS服务器安装Anaconda

    今天拿到了服务器,但是需要的环境都没有,从头开始配. 需要的环境很多,从装Anaconda开始. 版本相关:输入命令 cat /etc/redhat-release,我的版本是 CentOS Linu ...

  6. 声明对象的方式/构造函数/原型/this指向

      函数的发展历程(声明函数的方式):     1.通过Object构造函数或字面量的方式创建单个对象 var obj = new Object; obj.name="新华"; o ...

  7. SQL Server 批量 删除表索引

    当旧的数据库中的数据几乎很少使用到的时候,索引又占用着较大的磁盘空间,数据又不能删除,又想节省磁盘空间. 这个时候可以将所有表的索引进行删除了(先创建索引备份脚本,以备需要还原),可以批量一起删除. ...

  8. vecto容器中一些没有注意到的地方

    vector容器 vectoor是一个单口容器. vector动态增长的基本原理 当插入新元素的时候,如果空间不足,那么vector会重新申请更大的一块内存空间,将原空间数据拷贝到新空间,释放旧空间的 ...

  9. React 应用设计之道 - curry 化妙用

    使用 React 开发应用,给予了前端工程师无限"组合拼装"快感.但在此基础上,组件如何划分,数据如何流转等应用设计都决定了代码层面的美感和强健性. 同时,在 React 世界里提 ...

  10. 【leetcode】1154. Day of the Year

    题目如下: Given a string date representing a Gregorian calendar date formatted as YYYY-MM-DD, return the ...