zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    SQL Server中删除表中重复数据
    [Everyday Mathematics]20150121
    [Everyday Mathematics]20150120
    [Everyday Mathematics]20150119
    [Everyday Mathematics]20150118
    [Everyday Mathematics]20150117
    Hilbert先生旅馆的故事
    调和级数发散的简短证明
    [Everyday Mathematics]20150116
    [Everyday Mathematics]20150115
  • 原文地址:https://www.cnblogs.com/llcdbk/p/12088462.html
Copyright © 2011-2022 走看看