vue 自定义组件绑定model+弹出选择支持上下按键选择

参考地址v-modelicon-default.png?t=N7T8https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model

原文代码

Vue.component('base-checkbox', {model: {prop: 'checked',event: 'change'},props: {checked: Boolean},template: `<inputtype="checkbox"v-bind:checked="checked"v-on:change="$emit('change', $event.target.checked)">`
})现在在这个组件上使用 v-model 的时候:
<base-checkbox v-model="lovingVue"></base-checkbox>这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候,这个 lovingVue 的 property 将会被更新注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

主要需要在子组件增加mode,实现绑定的值和事件

关键点

model双向绑定,属性接收两个参数,类型:{ prop?: string, event?: string }
1.prop 也就是调用该组件的父组件中使用v-model指令绑定的属性
2.event 对应的是修改prop指定属性的值的函数

子组件中需要在data里声明个变量取父窗口通过prop传来的值

子组件触发改变内容, 创建方法onChange

第1个参: 是 model里event指定的change,

第2个参: 是 model里prop指定的变量,修改此变量,父窗口通过v-model就实现了双向绑定

onChange(){
          this.$emit('change','子组件触发改变了内容 ')         
 }

子组件代码

<template><div><!-- {{ dataVal }}<p><button @click="onChange">改变内容&l

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/733607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2.4_3 死锁的处理策略——避免死锁

文章目录 2.4_3 死锁的处理策略——避免死锁&#xff08;一&#xff09;什么是安全序列&#xff08;二&#xff09;安全序列、不安全状态、死锁的联系&#xff08;三&#xff09;银行家算法 总结 2.4_3 死锁的处理策略——避免死锁 银行家算法是“避免死锁”策略的最著名的一个…

Elasticsearch架构原理

一. Elasticsearch架构原理 1、Elasticsearch的节点类型 在Elasticsearch主要分成两类节点&#xff0c;一类是Master&#xff0c;一类是DataNode。 1.1 Master节点 在Elasticsearch启动时&#xff0c;会选举出来一个Master节点。当某个节点启动后&#xff0c;然后使用Zen D…

时间感知自适应RAG(TA-ARE)

原文地址&#xff1a;Time-Aware Adaptive RAG (TA-ARE) 2024 年 3 月 1 日 介绍 随着大型语言模型&#xff08;LLM&#xff09;的出现&#xff0c;出现了新兴能力的概念。前提或假设是LLMs具有隐藏的和未知的能力&#xff0c;等待被发现。企业家们渴望在LLMs中发现一些无人知晓…

论文笔记 - 基于振动信号的减速器故障诊断方法

1.论文摘要 基于振动信号的减速器故障诊断方法, 沈晴,《起重运输机械》,2018 原作者联系方式: shenqing@zmpc.com 这篇文章包含了一个从工程到数据处理和故障定位的完整过程。是一篇综述文档。它介绍了机械设备常见的三类故障(轴,齿轮、轴承)的故障特征,并在一个故障追…

指针数组和数组指针(详细解释)

指针数组 指针数组的作用 指针数组和数组指针是C语言中常用的概念&#xff0c;它们分别有不同的作用和用法。 指针数组&#xff1a; 指针数组是一个数组&#xff0c;其中的每个元素都是指针类型。它可以用来存储多个指针&#xff0c;每个指针可以指向不同的数据类型或者相同…

xxl-job学习记录

1、应用场景 例&#xff1a; 某收银系统需要在每天凌晨统计前一天的财务分析、汇总 某银行系统需要在信用卡还款日前三天发短信提醒等 2、为什么需要使用任务调度 spring中提供了注解Scheduled的注解&#xff0c;这个注解也可以实现定时任务的执行 我们只需要在方法上使用这…

人工智能|机器学习——K-means系列聚类算法k-means/ k-modes/ k-prototypes/ ......(划分聚类)

1.k-means聚类 1.1.算法简介 K-Means算法又称K均值算法&#xff0c;属于聚类&#xff08;clustering&#xff09;算法的一种&#xff0c;是应用最广泛的聚类算法之一。所谓聚类&#xff0c;即根据相似性原则&#xff0c;将具有较高相似度的数据对象划分至同一类簇&#xff0c;…

2024 年中国高校大数据挑战赛赛题 D:行业职业技术培训能力评价完整思路以及源代码分享

中国是制造业大国&#xff0c;产业门类齐全&#xff0c;每年需要培养大量的技能娴 熟的技术工人进入工厂。某行业在全国有多所不同类型&#xff08;如国家级、 省级等&#xff09;的职业技术培训学校&#xff0c;进行 5 种技能培训。学员入校时需要 进行统一的技能考核&#xf…

数字化转型导师坚鹏:科技金融政策、案例及数字化营销

科技金融政策、案例及数字化营销 课程背景&#xff1a; 很多银行存在以下问题&#xff1a; 不清楚科技金融有哪些利好政策&#xff1f; 不知道科技金融有哪些成功案例&#xff1f; 不知道科技金融如何数字化营销&#xff1f; 课程特色&#xff1a; 以案例的方式解读原…

【个人开发】llama2部署实践(二)——基于GPU部署踩坑

折腾了一整天&#xff0c;踩了GPU加速的一堆坑&#xff0c;记录一下。 1.GPU加速方式 上篇已经写了llama2部署的大概流程&#xff1a;【【个人开发】llama2部署实践&#xff08;一&#xff09;】——基于CPU部署 针对llama.cpp文件内容&#xff0c;仅需再make的时候带上参数…

数字建筑欢乐颂,智慧工地共筑美好未来!

在解决农民工人欠薪这一长期困扰建筑业的难题上&#xff0c;某建筑公司响应政策&#xff0c;严格按照实名制管理&#xff0c;实施过程中发现并克服了传统管理模式的痛点&#xff1a;聊天群组的信息时&#xff0c;往往会被淹没在“收到”回复中&#xff0c;影响沟通效率&#xf…

探索React中的类组件和函数组件

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

每日一题leetcode-找出数组的第K大和

一.题目解析 读完题目后我们知道&#xff0c;该题就是让我们在子序列中求和&#xff0c;我们要在不同的子序列中排序找到第K大的和。何为子序列&#xff1f; 子序列就是在一个数组中抽出一些元素构成一个新的数组即可&#xff0c;不要求一定是连续的&#xff1b; 例如&#x…

深入解析汽车MCU的软件架构

一、背景知识 电动汽车&#xff08;EV&#xff09;正在成为首选的交通方式&#xff0c;为传统内燃机汽车提供了一种可持续发展的环保型替代方案。在电动汽车复杂的生态系统中&#xff0c;众多电子控制单元&#xff08;ECU&#xff09;在确保其高效运行方面发挥着至关重要的作用…

《IAB视频广告标准:综合指南(2022)》之概述篇 - 我为什么要翻译介绍美国人工智能科技公司IAB 系列(2)

IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&#xff09;自1996年成立以来&#xff0c;先后为700多家媒体…

最优算法100例之03-判断是否是栈的弹出序列

专栏主页:计算机专业基础知识总结(适用于期末复习考研刷题求职面试)系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。 例…

20、电源管理入门之Hypervisor中的电源管理

目录 1. Hypervisor概念介绍 2. 汽车软件中的Hypervisor应用 3. QNX Hypervisor 4. Hypervisor中的多OS通信技术 5. 电源管理相关 参考: 很多时候听说Hypervisor,但是对底层软件技术不了解的人感觉挺神秘。本篇文章简单介绍下Hypervisor的基本概念,另外介绍下电影管理…

从零开始:神经网络(2)——MP模型

声明&#xff1a;本文章是根据网上资料&#xff0c;加上自己整理和理解而成&#xff0c;仅为记录自己学习的点点滴滴。可能有错误&#xff0c;欢迎大家指正。 神经元相关知识&#xff0c;详见从零开始&#xff1a;神经网络——神经元和梯度下降-CSDN博客 1、什么是M-P 模型 人…

《剑指 Offer》专项突破版 - 面试题 76 : 数组中第 k 大的数字(C++ 实现)

目录 详解快速排序 面试题 76 : 数组中第 k 大的数字 详解快速排序 快速排序是一种非常高效的算法&#xff0c;从其名字可以看出这种排序算法最大的特点是快。当表现良好时&#xff0c;快速排序的速度比其他主要对手&#xff08;如归并排序&#xff09;快 2 ~ 3 倍。 快速排…

浏览器与Node.js事件循环:异同点及工作原理

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…