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
随机推荐
- Oracle知识整理笔记
- python 正则表达式 反斜杠(/)的麻烦和陷阱
- Linux 每天自动备份mysql数据库的方法
- Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
- Linux编译升级php的详细方法
- vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
- Python 数据结构之队列的实现
- python迭代器实例简析
- php之字符串变相相减的代码
- 2013年国家法定节假日安排 春节假期2月9日至15日
- 学习JavaScript事件流和事件处理程序
- Js组件的一些写法
- mysql修改开启允许远程连接的方法
- 初窥JQuery(二) 事件机制(1)
- C#常用的字符串扩展方法汇总
- 构建免受 FSO 威胁虚拟主机(一)
- HttpHelper类的调用方法详解
- Android仿iPhone日期时间选择器详解
- Python嵌套列表转一维的方法(压平嵌套列表)
- iOS 模块化之JLRoute路由示例