zoukankan      html  css  js  c++  java
  • [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>
  • 相关阅读:
    WSP_mainActivity
    使用Xutils(HttpUtils)请求网络数据
    ScrollView横向滑动与fragment的联动
    侧滑菜单
    Pull解析xml文件
    Xlistview的应用1(上拉刷新,下拉加载)fragment
    XlistView4(脚部刷新)
    XlistView3(头部的代码)
    GCD队列组的使用
    GCD栅栏函数dispatch_barrier
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7517612.html
Copyright © 2011-2022 走看看