9.vue学习笔记(组件传递Props校验+组件事件-组件传递数据+组件事件-配合“v-model”使用)

文章目录

        • 1.组件传递Props校验
          • 1.1.默认值
          • 1.2.必选项
          • 1.3.注意事项:props 是只读的
        • 2.组件事件-组件传递数据
          • 2.1.温馨提示:组件之间传递数据的方案
        • 3.组件事件-配合“v-model”使用

1.组件传递Props校验
Vue组件可以更细致地声明对传入的 props 的校验要求
以下例子为接收String类型传输number控制台警告

在这里插入图片描述

接收多种类型
props:{title:{type:[String,Number,Array,Object]}
}
1.1.默认值
模拟情况:传递数据的时候并没有真实传递

在这里插入图片描述

<template><h3>ComponentA</h3><ComponentB :title="title" :age="age" :names="names"/>
</template><script>import ComponentB from './ComponentB.vue';export default{data(){return{title:"测试",//age:20,//names:["Tom","Bob"]}},components:{ComponentB}
}
</script>
________________________________________________________________________________
<template><h3>ComponentB</h3><p>{{ title }}</p><p>{{ age }}</p><ul><li v-for="(name,index) of names" :key="index">{{ name }}</li></ul>
</template><script>
export default{data(){return{}},props:{title:{type:[String,Number,Array,Object]},age:{type:Number,default:0},//数字和字符串可以直接default,但是如果是数组和对象,必须通过工厂函数返回默认值names:{type:Array,default(){return ["xxx"]}}}
}
</script>
1.2.必选项
没有传值就会提示警告

在这里插入图片描述

1.3.注意事项:props 是只读的

在这里插入图片描述

2.组件事件-组件传递数据
在组件的模板表达式中,可以直接使用$emit方法触发自定义事件
触发自定义事件的目的是组件之间传递数据(子传父)

在这里插入图片描述

<template><h3>组件事件</h3><ChildVue @someEvent="getHandle"/><p>父元素:{{ message }}</p>
</template>
<script>import ChildVue from "./Child.vue";export default{data(){return {message:""}},components:{ChildVue},methods:{getHandle(data){console.log("触发了",data);this.message = data;}}
}</script>
________________________________________________________________________________
<template><h3>Child</h3><button @click="clickEventHandle">传递数据</button>
</template>
<script>export default{data(){return{msg:"Child数据!"}},methods:{clickEventHandle(){//自定义事件this.$emit("someEvent",this.msg)}}
}</script>
2.1.温馨提示:组件之间传递数据的方案
1.父传子:props (子级不可变更父级传来的数据:只读)
2.子传父:自定义事件( this.$emit )
3.组件事件-配合“v-model”使用
v-model:输入的同时获取用户输入的信息
希望实现:组件A输入数据,组件B实时得到数据

在这里插入图片描述

<template><SearchComponent @searchEvent="getSearch"/><h3>Main</h3><p>搜索内容为:{{ search }}</p>
</template>
<script>
import SearchComponent from './SearchComponent.vue'export default{data(){return{search:""}},components:{SearchComponent},methods:{getSearch(data){this.search = data}}
}
</script>
________________________________________________________________________________
<template>搜索:<input type="text" v-model.lazy="search">
</template>
<script>
export default{data(){return{search:""}},watch:{search(newValue,oldValue){this.$emit("searchEvent",newValue);}}
}
</script>

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

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

相关文章

顺序表经典算法及其相关思考

27. 移除元素 - 力扣&#xff08;LeetCode&#xff09; 思路一 利用顺序表中的SLDestroy函数的思想&#xff0c;遇到等于val值的就挪动 思路二 双指针法&#xff1a;不停的将和val不相等的数字往前放。此时的des更像一个空数组&#xff0c;里面存放的都是和val不相等、能够存…

【人工智能学习思维脉络导图】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 知识图谱1. 基础知识2.人工智能核心概念3.实践与应用4.持续学习与进展5.挑战与自我提升6.人脉网络 知识图谱 人工智能学习思维脉络导图 1. 基础知识 计算机科学基础数学基础&#xff08;线性代数、微积分、概率论和统计学…

先进语言模型带来的变革与潜力

用户可以通过询问或交互方式与GPT-4这样的先进语言模型互动&#xff0c;开启通往知识宝库的大门&#xff0c;即时访问人类历史积累的知识、经验与智慧。像GPT-4这样的先进语言模型&#xff0c;能够将人类历史上积累的海量知识和经验整合并加以利用。通过深度学习和大规模数据训…

第十四章[面向对象]:14.5:访问限制/属性

一,动态添加属性/方法 1,动态添加实例属性和实例方法 from types import MethodTypeclass Student:passs = Student()# 动态添加属性 s.name = Tom print(s.name) print(s.__dict__)# 定义一个函数作为实例方法 def set_age(self, age):self.age = age# 动态添加方法 s.set_…

Nginx基础入门

一、Nginx的优势 nginx是一个高性能的HTTP和反向代理服务器&#xff0c;也是一个SMTP&#xff08;邮局&#xff09;服务器。 Nginx的web优势&#xff1a;IO多路复用&#xff0c;时分多路复用&#xff0c;频分多路复用 高并发&#xff0c;IO多路复用&#xff0c;epoll&#xf…

【MySQL】学习连接查询和案例演示

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-KOxr1rwR9cQTlydJ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

OD(8)之Mermaid流程图(flowcharts)使用详解

OD(8)之Mermaid流程图(flowcharts)使用详解 Author: Once Day Date: 2024年2月20日 漫漫长路才刚刚开始… 全系列文章可参考专栏: Linux实践记录_Once_day的博客-CSDN博客 参考文章: 关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charting tool‍…

聊一聊bpmn-js中的依赖注入框架didi

最近在用bpmn-js来进行flowable流程图的开发工作,不可避免地希望对其运行机制做一个大致的了解,在使用bpmn-js的过程中,bpmn-js基于diagram-js实现的插件式开发方式引起了我的兴趣。于是通过查阅源码希望对齐进一步了解发现:diagram-js是基于一个叫didi的实现的依赖注入功能…

C#通过泛型方法的重载分别调用主窗体和提示窗体

目录 一、涉及到的知识点 1.泛型方法的重载 2.使用泛型更好地实现通用化 二、示例&#xff1a;泛型方法及其重载 1.源码 2. 生成效果 实际开发项目时&#xff0c;有时会因为调用窗体或提示窗体过多&#xff0c;而难于管理&#xff0c;这时&#xff0c;可以通过泛型方法的…

【力扣hot100】刷题笔记Day8

前言 到了大章节【链表】了&#xff0c;争取两三天给它搞定&#xff01;&#xff01; 160. 相交链表 - 力扣&#xff08;LeetCode&#xff09;】 双指针 参考题解&#xff0c;相比于求长度右对齐再一起出发的方法简洁多了 class Solution:def getIntersectionNode(self, head…

基于FPGA的二维DCT变换和逆变换verilog实现,包含testbench

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 数据导入到matlab显示图像 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 timescale 1ns / 1ps // // Company: // Engineer:…

win32 汇编读文件

做了2个小程序&#xff0c;没有读成功&#xff1b;文件打开了&#xff1b; .386.model flat, stdcalloption casemap :noneinclude windows.inc include user32.inc includelib user32.lib include kernel32.inc includelib kernel32.lib include Comdlg32.inc includelib …

2024-02-21 学习笔记(DETR)

自动多模态检测验证效果不佳&#xff08;过检太多&#xff09;后&#xff0c;节后开始尝试DETR路线。 基本梳理了下DETR发展和验证的脉络&#xff0c;先进行相应指定场景的效果验证。 关于DETR系列的介绍&#xff0c;B站上比较多&#xff0c;迪哥的都讲的比较细。 推荐大佬的…

如何在java中使用 Excel 动态函数生成依赖列表

前言 在Excel 中&#xff0c;依赖列表或级联下拉列表表示两个或多个列表&#xff0c;其中一个列表的项根据另一个列表而变化。依赖列表通常用于Excel的业务报告&#xff0c;例如学术记分卡中的【班级-学生】列表、区域销售报告中的【区域-国家/地区】列表、人口仪表板中的【年…

[计网底层小探索]:实现并部署多线程并发Tcp服务器框架(基于生产者消费者模型的线程池结构)

文章目录 一.网络层与传输层协议sockaddr结构体继承体系(Linux体系)贯穿计算机系统的网络通信架构图示: 二.实现并部署多线程并发Tcp服务器框架线程池模块序列化反序列化工具模块通信信道建立模块服务器主体模块任务回调模块(根据具体应用场景可重构)Tips:DebugC代码过程中遇到…

el-table同时固定左列和右列时,出现错误情况

最近遇到一个问题,就是需求是要求表格同时固定序号列和操作列,我们用的是饿了么组件库的el-table,如下图,出现了错误情况: 解决方法就是使用doLayout方法: 如果使用了keep-alive,可以在activated里执行doLayout方法: activated() {this.$nextTick(() => {this.$ref…

【Crypto | CTF】BUUCTF RSA2

天命&#xff1a;密码学越来越难了&#xff0c;看别人笔记都不知道写啥 天命&#xff1a;莫慌&#xff0c;虽然我不会推演法&#xff0c;但我可以用归纳法 虽然我不知道解题的推演&#xff0c;但我可以背公式啊哈哈哈 虽然我不会这题&#xff0c;但是我也能做出来 公式我不知…

机器学习基本概念(李宏毅课程)

目录 一、概念:1、机器学习概念:2、深度学习概念&#xff1a; 二、深度学习中f(.)的输入和输出&#xff1a;1、输入&#xff1a;2、输出&#xff1a; 三、三种机器学习任务&#xff1a;1、Regression回归任务介绍&#xff1a;2、Classification分类任务介绍&#xff1a;3、Stru…

计算以10为底的对数 math.log10(x)

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算以10为底的对数 math.log10(x) [太阳]选择题 以下代码的输出结果中正确的是? import math print("【执行】math.log10(10)") print(math.log10(10)) print("【执行】math…

【elasticsearch实战】知识库文件系统检索工具FSCrawler

需求背景 最近有一个需求需要建设一个知识库文档检索系统&#xff0c;这些知识库物料附件的文档居多&#xff0c;有较多文档格式如&#xff1a;PDF, Open Office, MS Office等&#xff0c;需要将这些格式的文件转化成文本格式&#xff0c;写入elasticsearch 的全文检索索引&am…