• [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>
  • 相关阅读:
    Introduction to XQuery in SQL Server 2005
    [译]Cassandra 架构简述
    冬日绘版实录
    网页实现串口TCP数据通讯的两种方案
    (转)感知哈希算法
    CoreParking
    单线程扫描电脑所有文件与并行计算扫描电脑所有文件所用时间?
    强名称程序集
    一些题(六)
    一些题(五)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7517612.html
Copyright © 2020-2023  润新知