vue的v-model指令总结之通信方式总结

一、v-model指令总结

1、用在表单元素或组件中
2、用在表单元素上文本框或密码框相当于:value="数据"+@input="数据=$event. target. value'"复选框:checked="数据" +@change="数据=$event. target. checked"下拉列表:selected="数据" +@change="数据= $event. target. selected"
3、用在组件实现父子数据双向绑定:value="数据" + @input=" 数据=$event"

二、通信方式总结

1、父传子

•   父组件内:在自组件标签上, 写属性
•   子组件内:通过props属性接收

2、子传父

• 子组件内: 通过: $emit(“自定义事件”,参数,参数2)
• 父组件内:子组件标签上, : @自定义事件名="函数式"

3、祖孙

爷爷:provide () {}爷爷传送
孙子:inject: ['']  孙子接受
        

4、兄弟

通过evenbus事件总线
      methods: {
    handleClick () {
      // 使用数据方 通过$on订阅
      vm.$on('useMsg', (data) => {
        console.log(data)
      })
    }
    methods: {
    handleClick () {
      vm.$emit('useMsg', this.msg)
    }
  }, 

5、ref(ref属性值:ref属性所在的dom或组件 )

   ①ref加在普通的元素上,用this.ref.name获取到的是dom元素;②ref加在子组件上,用this.ref.name获取到的是组件实例,可以使用组件的所有方法;③如何利用v-for和ref获取一组数据或者dom节点。当v-for用于元素或者组件的时候,引用信息将是包含dom节点或组件实例的数组;关于ref注册时间的重要说明:因为ref本身是作为渲染结果被创建的,在初始渲染的时候,你不能访问它们--它们还不存在!$refs也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

6、vuex--->后期发

 

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

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

相关文章

【C语言】数据结构——链式二叉树实例探究

💗个人主页💗 ⭐个人专栏——数据结构学习⭐ 💫点击关注🤩一起学习C语言💯💫 导读: 我们在前面学习了单链表,顺序表,栈和队列,小堆。 今天我们来学习链式二叉…

MATLAB 主成分分析PCA拟合平面点云 (42)

MATLAB 主成分分析PCA拟合平面点云 (42) 一、算法介绍二、算法实现一、算法介绍 主成分分析(Principal Component Analysis,PCA)是一种常用的数据降维和特征提取技术。它的主要思想是通过线性变换将数据投影到一个新的坐标系,使得在新的坐标系中数据的方差最大化。在3D点…

java读取含有合并单元格的Excel

java读取含有合并单元格的Excel Excel如下: import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import java.util.*;import org.apache.poi.hssf.usermodel.HSSFCell; import org.apache.poi.hssf.…

java字符串集合一致性比较

public Map<String,List<String> getDifferList(List<String> listA ,List<String> listB){Map<String,List<String>> returnMap new HashMap(); //返回结果List<String> differAList new ArrayList<>(); //A有B没…

springboot学习笔记(二)

1.Spring 和SpringBoot区别 2.Web开发入门 3.MVC模型 4.RequestMapping用法 5.RESTful 1.Spring 和SpringBoot区别 参考&#xff1a; 大家都懂Spring和SpringBoot的区别吗&#xff1f; - 知乎 https://www.zhihu.com/question/598494506/answer/3018702101 在学习了Spri…

Opencv实验合集——实验四:图片融合

1.概念 图像融合是将两个或多个图像结合在一起&#xff0c;创建一个新的图像的过程。这个过程的目标通常是通过合并图像的信息来获得比单个图像更全面、更有信息量的结果。图像融合可以在许多领域中应用&#xff0c;包括计算机视觉、遥感、医学图像处理等。 融合的方法有很多…

Docker 核心技术

Docker 定义&#xff1a;于 Linux 内核的 Cgroup&#xff0c;Namespace&#xff0c;以及 Union FS 等技术&#xff0c;对进程进行封装隔离&#xff0c;属于操作系统层面的虚拟化技术&#xff0c;由于隔离的进程独立于宿主和其它的隔离的进程&#xff0c;因此也称其为容器Docke…

系统设计架构——互联网案例

Netflix 的技术栈 移动和网络:Netflix 采用 Swift 和 Kotlin 来构建原生移动应用。对于其 Web 应用程序,它使用 React。 前端/服务器通信:Netflix 使用 GraphQL。 后端服务:Netflix 依赖 ZUUL、Eureka、Spring Boot 框架和其他技术。 数据库:Netflix 使用 EV 缓存、Cas…

uni-app内容

1. 应用生命周期 - **onLaunch:** 应用初始化时触发&#xff0c;全局只执行一次&#xff0c;例如在刷新任务或项目重启时。 - **onShow:** 从后台进入前台触发&#xff0c;即当应用从编辑器或其他地方进入浏览器页面时。 - **onHide:** 从前台进入后台时触发。 - **onError:** …

关于“Python”的核心知识点整理大全25

目录 10.3.4 else 代码块、 10.3.5 处理 FileNotFoundError 异常 alice.py 在这个示例中&#xff0c;try代码块引发FileNotFoundError异常&#xff0c;因此Python找出与该错误匹配的 except代码块&#xff0c;并运行其中的代码。最终的结果是显示一条友好的错误消息&#x…

云计算:FusionCompute 通过 FreeNAS 添加SAN存储

目录 一、实验 1.环境准备 2.FusionCompute添加CNA 3.在存储中创建LUN资源映射给CNA节点 3.添加存储资源关联CNA主机节点 4.扫描存储资源 5.将存储设备添加为数据存储 二、问题 1.FusionCompute中存储如何分类 2.存储资源与存储设备有何区别 3.FusionCompute支持哪些…

线上环境如何正确配置 Django 的 DEBUG?

Author&#xff1a;rab Django Version&#xff1a;3.2 Python Version&#xff1a;3.9 目录 前言一、DEBUG True二、DEBUG False三、页面异常解决总结 前言 由于最近在学习 Django 的知识&#xff0c;于是尝试开发了一套 Blog 系统&#xff0c;在本地测试时是页面显示没问题…

Centos上的默认文本编辑器vi的操作方法积累

打开一个文本后&#xff0c;常见的操作方法积累如下&#xff1a; 001-进入或退出插入模式的方法 按下 i 进入插入模式。 按下 Esc 退出插入模式。 002-进入命令模式的方法&#xff1a; 按下 Esc 退出插入模式&#xff0c;然后输入冒号:进入命令模式。 003-退出vi编辑器的方…

零刻EQ12 N100 2.5G双网口 All In One新手教程

零刻EQ12 N100 2.5G双网口 All In One新手教程 前言1.硬件配置2.准备工作2.1. ESXI8.0U2镜像2.2. Rufus磁盘工具下载2.3. ikuai镜像下载2.4. StarWindConverter虚拟磁盘格式转换工具下载2.5. OpenWrt镜像下载2.6. 黑群晖RR引导镜像下载(DSM7.2)2.7. 需要准备的硬件2.8. 格式化需…

【ArcGIS微课1000例】0081:ArcGIS指北针乱码解决方案

问题描述&#xff1a; ArcGIS软件在作图模式下插入指北针&#xff0c;出现指北针乱码&#xff0c;如下图所示&#xff1a; 问题解决 下载并安装字体&#xff08;配套实验数据包0081.rar中获取&#xff09;即可解决该问题。 正常的指北针选择器&#xff1a; 专栏介绍&#xff…

C函数生成一个与文本字符串相对应的字体矩阵

以下是一个使用C语言生成一个与文本字符串相对应的字体矩阵的示例代码&#xff1a; #include <stdio.h> #include <stdlib.h> // 定义字体矩阵结构体 typedef struct { int width; // 字体矩阵的宽度 int height; // 字体矩阵的高度 char* data; …

【复杂网络分析与可视化】——通过CSV文件导入Gephi进行社交网络可视化

目录 一、Gephi介绍 二、导入CSV文件构建网络 三、图片输出 一、Gephi介绍 Gephi具有强大的网络分析功能&#xff0c;可以进行各种网络度量&#xff0c;如度中心性、接近中心性、介数中心性等。它还支持社区检测算法&#xff0c;可以帮助用户发现网络中的群组和社区结构。此…

设计模式——0前言目录

1 设计模式介绍 应当站在产品经理的角度来学习设计模式 是软件设计中常见问题的典型解决方案&#xff0c;可用于解决代码中反复出现的设计问题 学习效果一般的原因在于自己没有站在产品经理的角度学习&#xff0c;仅仅是为了学习怎么实现&#xff0c;用什么算法实现。 分类&…

IO第6天

实现AB进程对话 A进程发送一句话后&#xff0c;B进程接收到打印。然后B进程发送一句话&#xff0c;A进程接收后打印b。重复上述步骤。直到AB接收或者发送完quit后&#xff0c;结束AB进程 使用消息队列实现 //A文件 #include <myhead.h>struct msgbuf{long mtype;char mt…

neo4j-Py2neo使用

neo4j-Py2neo(一)&#xff1a;基本库介绍使用 py2neo的文档地址&#xff1a;https://neo4j-contrib.github.io/py2neo/ py2neo的本质是可以采用两种方式进行操作&#xff0c;一种是利用cypher语句&#xff0c;一种是使用库提供的DataTypes&#xff0c;Data类的实例需要和远程…