• [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript


    Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as forms. This lesson shows how to use it by creating a custom checkbox component using the @Model decorator in TypeScript.

    When using the v-model, the custom component will receive 'value' prop from the parent component. If we also want to pass ':value' to the custom component, we need to use  '@Model('change') propName'.

    v-model will also received 'change' event for components communcation.

    Checkbox:

    <template>
      <div>
          <input type="checkbox" :id="id" :checked=checked @change="changed"/> {{label}}
      </div>
    </template>
    
    <script lang="ts">
    import Vue from 'vue'
    import { Component, Prop, Model } from 'vue-property-decorator'
    @Component
    export default class MyCheckbox extends Vue {
      @Prop() label: string
      @Prop() id: string
    
      @Prop()
      @Model('change') checked: boolean
    
      changed(ev) {
        this.$emit('change', ev.target.checked)
      }
    }
    </script>

    Parent Component:

    <template>
        <div>
            <MyCheckbox :label="checkbox.label" :id="checkbox.id" v-model="checkbox.checked"/>
    
            {{JSON.stringify(checkbox)}}
        </div>
    </template>
    <script lang="ts">
    
    import Vue from 'vue'
    import {Component} from 'vue-property-decorator'
    import MyCheckbox from './MyCheckBox.vue'
    
    @Component({
        components: {
            MyCheckbox
        }
    })
    export default class HelloTs extends Vue {
    
        checkbox = {
            label: 'Fancy checkbox',
            id: 'checkbox-id',
            checked: true
        }
    }
    </script>
  • 相关阅读:
    虚幻4游戏开发_3_创建与继承材质
    Python 之 读取txt文件
    Guava ---- Concurrent并发
    leetCode 67.Add Binary (二进制加法) 解题思路和方法
    poj 1331 Multiply
    二叉树的三叉存储
    FTPClientUtil FTPclient工具
    HDU1018 Big Number n!的位数
    MyBatis參数格式化异常解决方式:MyBatisSystemException:
    Spark:大数据的电花火石!
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7517612.html
Copyright © 2020-2023  润新知