【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能

app.component.html

<app-sizer [(ngModel)]="fontSizePx"></app-sizer>
<p [style.font-size.px]="fontSizePx">父组件字号：{{fontSizePx}}px</p>

app.component.ts

...fontSizePx=12...

sizer.component.html

<div><button (click)="ngModelChange.emit(ngModel=ngModel+1)">增加+</button><button (click)="ngModelChange.emit(ngModel=ngModel-1)">减小-</button><button (click)="ngModelChange.emit(12)">重置</button><p [style.font-size.px]="ngModel">子组件字号：{{ngModel}}px</p>
</div>

sizer.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';@Component({selector: 'app-sizer',templateUrl: './sizer.component.html',styleUrls: ['./sizer.component.scss']
})
export class SizerComponent implements OnInit {constructor() { }ngOnInit(): void { }@Input()  ngModel: any;@Output() ngModelChange = new EventEmitter;//注意一定要用“绑定名称+'Change'”的Output，否则不能被双向绑定支持。在子组件内部使用“xxxChange.emit(值)”来触发父组件ngModel绑定数据的变化（这是实现双向绑定的核心）。}

实际渲染效果

扩展阅读【说人话】真正意义上讲清楚了如何在vue的自定义组件中使用v-model=“”双向绑定_你挚爱的强哥❤给你发来1条消息❤-CSDN博客组件代码：<template> <div class="sg-component"> </div></template><script> export default { props: ["modelValue"],//单项绑定(这个modalValue叫什么不重要，重要是保持一致，避开关键词，用于接收父组件v-model=后面传过来的值) model: {https://s-z-q.blog.csdn.net/article/details/108277420

【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能相关推荐

群晖NAS 进阶玩法，教你轻松玩转 Docker
好不容易买了心爱的 NAS 你解锁了多少它的强大功能呢? 进阶玩法 Docker 肯定不能错过 Docker 是一个开源的应用容器引擎让开发者可以打包他们的应用到一个可移植的镜像中翻译成人话就是 ...
CUDA加速计算矩阵乘法进阶玩法(共享内存)
CUDA加速计算矩阵乘法&进阶玩法~共享内存一.基础版矩阵乘法二.为什么可以利用共享内存加速矩阵乘法 1.CUDA内存读写速度比较 2.申请共享内存三.改进版矩阵乘法(利用共享内存) 一 ...
知乎进阶玩法：打造精准被动引流管道
本篇玩法是在第一篇的基础上,做了进阶部分的讲解,如果没有看过原文,可以先点击查看:知乎引流实操:日吸200精准粉丝玩法分享,否则本文看的会比较吃力. 再正式说进阶实操之前,我想先和大家聊下知乎的推荐机 ...
iPhone手机进阶玩法，轻敲两下，即可截屏
iPhone手机进阶玩法, 轻敲两下,即可截屏.
【AI 绘画】 MidJourney 入门、参数解析、进阶玩法、变现指南、资料包
[AI 绘画] MidJourney 入门.参数解析.进阶玩法.变现指南.资料包|ai绘画|视频文件_网易订阅
王者舰队服务器维护需要几天,王者舰队新手进阶玩法新手怎么玩_3DM手游
王者舰队里面的新手是一个很重要的阶段,小伙伴们在前期需要理解很多的知识不然在以后的战斗中会出现许多失误以及不懂的地方,那么王者舰队里面的新手究竟应该怎么进阶呢?下面小编就给大家介绍一下王者舰队新手进阶 ...
JQuery 类似Vue.js的双向数据绑定器。
类似Vue.js双向数据绑定器.依赖于JQuery. 实时更新数据,兼容IE9以上浏览器. IE8则是失去焦点更新数据. ;(function($) {BindSysnc.pt = BindSysnc ...
206块积木，72套进阶玩法！玩转STEAM教育，帮你省掉上万块的乐高课
▲ 数据汪特别推荐点击上图进入玩酷屋作为一名资深积木达人,小木我可是大大小小的积木阅览无数,当然乐高也不会放过,虽然"钱包君"已经是路人了.(每月的工资用来买乐高~) 之前给大 ...
android 微信朋友圈头像,微信进阶玩法，这样设置朋友圈和头像，个性又好看
今日分享:微信头像.昵称.个性签名新玩法适用系统:安卓.苹果对于很多人来说,微信的使用已经融入了生活的方方面面,现在大部分人都使用微信来联络感情,平时加了一个新的微信好友,我们初步了解一个微信朋友 ...

【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能

【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能相关推荐

最新文章

热门文章