Angular2实现自定义双向绑定属性
整理文档,搜刮出一个Angular 2实现自定义 双向绑定 属性的代码,稍微整理精简一下做下分享。
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core'; @Component({ selector: 'twoway', template: ` <input [(ngModel)]="username"> <p>Hello {{username}}!</p> ` }) export class TwoWayComponent implements OnInit { constructor() { } usernameValue: string; @Output() usernameChange = new EventEmitter(); @Input() get username() { return this.usernameValue; } set username(val) { this.usernameValue = val; this.usernameChange.emit(this.usernameValue); } ngOnInit() { } }
使用时,就可以通过[(username)]=“你的当前属性” 进行双向绑定了。属性名 + 后缀 Change是一个约定的固定写法。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Angular2数据绑定详解
大致介绍 Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为: 1.属性绑定和插值表达式 组件类-> 模板 2.事件绑定:模板 -> 组件类 3.双向绑定: 模板 <-> 组件类 事件绑定 事件绑定是把模板中的事件绑定到组件类中的方法上,例如在一个组件中的HTML代码是: <p> <a (click)="doClick($event)">点我</a> </p> (click)表示要进行的操作,
-
Angular2实现自定义双向绑定属性
整理文档,搜刮出一个Angular 2实现自定义 双向绑定 属性的代码,稍微整理精简一下做下分享. import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core'; @Component({ selector: 'twoway', template: ` <input [(ngModel)]="username"> <p>Hello {{username}}!</
-
Vue 如何使用props、emit实现自定义双向绑定的实现
下面我将使用Vue自带的属性实现简单的双向绑定. 下面的例子就是利用了父组件传给子组件(在子组件定义props属性,在父组件的子组件上绑定属性),子组件传给父组件(在子组件使用$emit()属性定义一个触发方法,在父组件上的子组件监听这个事件). import Vue from 'vueEsm' var Com = { name:'Com', props:['val'], template:`<input type='text' @input='handleInput'/>`, methods
-
angular双向绑定详解
目录 双向绑定原理 ngModel 效果图 自定义双向绑定属性 组件-html 组件-ts 外部使用 效果图 总结 双向绑定原理 双向绑定将属性绑定与事件绑定结合在一起. Angular 的双向绑定语法是方括号和圆括号的组合 [()]. [] 进行属性绑定,() 进行事件绑定. 名称规则为 [输入名] + Change. 属性绑定(@Input-输入) - 设置特定的元素属性. 事件绑定(@Output-输出) - 侦听元素更改事件. 所以表单双向绑定中有 ngModel 和 ngModelCh
-
Android DataBinding的官方双向绑定示例
在Android Studio 2.1 Preview 3之后,官方开始支持双向绑定了. 可惜目前Google并没有在Data Binding指南里面加入这个教程,并且在整个互联网之中只有这篇文章介绍了如何使用反向绑定. 在阅读一下文章之前,我假设你已经知道如何正向绑定. 回顾一下Data Binding 在正向绑定中,我们在Layout里面的绑定表达式是这样的: <layout ...> <data> <variable type="com.example.mya
-
JavaScript 中 avalon绑定属性总结
avalon是前端MVVM框架,将所有前端代码彻底分成两部分,视图的处理通过绑定实现(angular有个更炫酷的名词叫指令),业务逻辑则集中在一个个叫VM的对象中处理.我们只要操作VM的数据,它就自然而然地神奇地同步到视图. $model(所有非$属性),$event(事件对象) 1.作用域圈定 ms-controller:按着就近原则自下而上扫描DOM树 ms-important:仅扫描本节点及之下作为扫描区 ms-skip:使绑定失效 2.ms-duplex双向绑定属性:除了绑定(VM同步数
-
vue3中reactive数据被重新赋值后无法双向绑定的解决
目录 reactive数据被重新赋值后无法双向绑定 推荐写法 vue3数据的双向绑定 一.script setup 二.ref() 函数 三.reactive()函数 reactive数据被重新赋值后无法双向绑定 这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发 推荐写法 import {reactive, toRefs} from 'vue' setup(props, context) { const state = reactive({ my
-
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo
-
自定义Vue中的v-module双向绑定的实现
v-module 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件,父组件监听 input 事件中传递的 value 值,并存储在父组件 data 中:然后父组件再通过 prop 的形式传递给子组件 value 值,再子组件中绑定 input 的 value 属性即可. 我们着手实现一遍: 子组件传值 首先子组件需要一个 input 标签,这个 input 标签需要绑定 input 事件,$emit 触发父组件的 input 事件,通过这种方法子组件传递值给父组件 <in
-
Vue自定义组件双向绑定实现原理及方法详解
前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表,没有去封装列表组件,只要有一点改动,每个页面都得加上.很肯定的说,没有用组件化开发的Vue项目是没有灵魂的.所以如何封装一个优雅且复用性高的组件成为我们必需的技能. Tab自定义组件 首先来看一个Tab组件的实现,看看它存在什么问题,哪里可以改进? 效果 组件 <template> <di
-
vue自定义组件实现双向绑定
场景: 我们比较常用的父子组件之间的交互方式: 父组件通过props将数据流入到子组件: 子组件通过$emit将更新后的数组发送的父组件: 今天,我们通过另一种方式实现交互,参考input框的v-model,实现自定义组件的双向数据绑定. 即:父组件值改变,子组件的值跟着改变:反之,子组件值发生变化,父组件值随之变化 子组件定义: 由于不能直接修改props属性值,我们这里定义valueData,通过监听实时接收value值,通过click方法修改valueData. 这里注意model语法糖p
随机推荐
- json实现前后台的相互传值详解
- python获取指定目录下所有文件名列表的方法
- js获取.aspx页面里面的服务器控件和.ascx中的服务器控件值
- Yii2实现log输出到file及database的方法
- PHP实现文件上传功能实例代码
- 给WordPress的编辑后台添加提示框的代码实例分享
- javascript实现多级联动下拉菜单的方法
- windows下C#定时管理器框架Task.MainForm详解
- android内存及内存溢出分析详解
- JavaScript Tips 使用DocumentFragment加快DOM渲染速度
- jquery判断当前浏览器的实现代码
- Ruby基础知识之基本流程控制
- python if not in 多条件判断代码
- PHP判断一个数组是另一个数组子集的方法详解
- PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
- Android中系统默认输入法设置的方法(输入法的显示和隐藏)
- 详细分析JS函数去抖和节流
- 解决python打不开文件(文件不存在)的问题
- spring cloud openfeign 源码实例解析
- Docker Compose部署及基础使用详解