探索Vue组件通信的秘密：打破隔阂，实现数据共享

news2024/11/24 22:56:29

一、Vue组件通信

  • 每个组件都有自己的数据, 提供在data中, 每个组件的数据是独立的, 组件数据无法互相直接访问 (合理的)
  • 但是如果需要跨组件访问数据, 就需要用到组件通信
    在这里插入图片描述
  • 要是有一万个商品？？？？就要写一万个吗？在这里插入图片描述
  • 函数调用：看起来调用时用一个函数，执行结果效果都是不一样？ 设置形参？在调用的时候传入实参？

特别函数：
1、设置组组件内所有特别，形参
2、组件调用的时候，传入所谓的实参？

（一）组件通信—父传子

1. 组件通信 - 父传子 props 传值

  • 父传子的基本语法:
  • ①、父组件通过给子组件加属性传值
<!-- 3.所谓调用函数：传实参 -->
<cpt-4 title="超级好吃的口水鸡" price="50" num="8"></cpt-4>
<cpt-4 title="泰国榴莲" price="288" num="6"></cpt-4>
  • ②、子组件中, 通过props属性接收
props:["title","price","num"]//1. 设置形参,语法固定
  • 创建components/04-cpt.vue子组件文件,子组件中, 通过props属性接收。
<template>
  <div class="box">
    <!-- 2. 使用：形参用到时候，当做变量！类似data初始化内数据变量！ -->
    <h3>标题：{{ title }}</h3>
    <p>价格:{{price}}元</p>
    <p>开业大酬宾,全场{{num}}折</p>
  </div>
</template>
<script>
export default {
    // 特别封装：如何设置所谓的形参
    props:["title","price","num"]//1. 设置形参,语法固定
}
</script>
<style scoped>
    .box{
        border:1px solid black;
    }
</style>
  • App.vue父组件里面调用cpt4子组件，父组件通过给子组件加属性传值。
<template>
  <div>
    <h1>超市商品列表:</h1>
    <!-- 3.所谓调用函数：传实参 -->
    <cpt-4 title="超级好吃的口水鸡" price="50" num="8"></cpt-4>
    <cpt-4 title="泰国榴莲" price="288" num="6"></cpt-4>
  </div>
</template>
<script>
import cpt4 from "./components/04-cpt.vue"
export default {
  components:{
    cpt4,
  }
}
</script>

在这里插入图片描述

  • 在data里面传递数据，通过实参来传递形参的值。
<template>
  <div>
    <h1>超市商品列表:</h1>
    <!-- 👇👇👇绑定变量,其中实参名:title和形参的变量名title没有必然的联系 -->
    <cpt-4 :title="title" :price="price" :num="num"></cpt-4>
  </div>
</template>
<script>
import cpt4 from "./components/04-cpt.vue"
export default {
  components:{
    cpt4,
  },
  data(){
    return{
      title:"火鸡面",
      price:10,
      num:5
    }
  }
}
</script>

在这里插入图片描述在这里插入图片描述

  • 利用父传子，可以往子组件传递数据。
  • 父传子的基本步骤是什么?
    父组件内, 给子组件添加属性的方式传值
    子组件内, 通过 props 接收

2. v-for 遍历展示组件练习

  • 以后的数据，都是从后端来的，那如何渲染的呢？ 我们可以循环的使用组件吗？要是可以使用，那又如何往组件里面传值呢？
  • 需求: 遍历展示商品列表
  • ①、假定, 发送请求回来的商品数据，
list:[
	{id:1,title:"good-1",price:10,num:8},
	{id:2,title:"good-2",price:88,num:8},
	{id:3,title:"good-3",price:99,num:8},
]
  • ②、v-for 遍历展示
<template>
  <div>
    <h1>超市商品列表:</h1>
    <!-- 商品数据:后台给的list数组 -->
    <cpt-4 v-for="item in list" :key="item.id" :title="item.title" :price="item.price" :num="item.num"></cpt-4>
  </div>
</template>
<script>
import cpt4 from "./components/04-cpt.vue"
export default {
  components:{
    cpt4,
  },
  data(){
    return{
      title:"火鸡面",
      price:10,
      num:5,
      list:[
			{id:1,title:"good-1",price:10,num:8},
			{id:2,title:"good-2",price:88,num:8},
			{id:3,title:"good-3",price:99,num:8},
		]
    }
  }
}
</script>

在这里插入图片描述在这里插入图片描述

3. 单向数据流

在这里插入图片描述

  • 在vue中需要遵循单向数据流原则： （从父到子的单向数据流动, 叫单向数据流）
 在vue中需要遵循单向数据流原则
 1. 父组件的数据发生了改变，子组件会自动跟着变
 2. 子组件不能直接修改父组件传递过来的props  props是只读的
  • 如果父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，，，，也应该避免

（二）组件通信—子传父

  • 创建components/04-cpt.vue子组件文件。
<template>
  <div class="box">
    <!-- 2使用：形参用到时候，当做变量！类似data初始化内数据变量！ -->
    <h3>标题：{{ title }}</h3>
    <p>价格:{{price}}元</p>
    <p>开业大酬宾,全场{{num}}折</p>
    <h4>库存:{{ kc }}件</h4>
    <button @click="kc--">卖一件</button>
  </div>
</template>
<script>
export default {
    props:["title","price","num","kc"]//1.设置形参,语法固定
}
</script>
<style scoped>
    .box{
        border:1px solid black;
    }
</style>
  • App.vue父组件里面调用cpt4子组件，父组件通过给子组件加属性传值。
<template>
  <div>
    <h1>超市商品列表:</h1>
    <!-- 商品数据:后台给的list数组 -->
    <p v-for="item in list" :key="item.id" >{{ item.title }} 库存:{{ item.kc }}</p>
    <hr>
    <cpt-4 
      v-for="item in list"  :key="item.id"  :title="item.title"  :price="item.price"  :num="item.num" :kc="item.kc"></cpt-4>
  </div>
</template>
<script>
import cpt4 from "./components/04-cpt.vue";
export default {
  components:{
    cpt4,
    cpt5,
  },
  data(){
    return{
      title:"火鸡面",
      price:10,
      num:5,
      list:[
        {id:1,title:"good-1",price:10,num:8,kc:10,},
        {id:2,title:"good-2",price:88,num:8,kc:33,},
        {id:3,title:"good-3",price:99,num:8,kc:66,},
      ]
    }
  }
}
</script>

在这里插入图片描述

  • 卖一件：
    ①、子组件自己kc- -
    ②、报错：数据是父级给的，如果要修改数据，应该是让父级去修改数据
    规定：子组件不能直接去修改父组件传入的数据！不然会造成数据紊乱！

1. 子传父组件通信

  • 子传父基本语法
  • ①、子组件可以通过 this.$emit('事件名', 参数1, 参数2, ...) 触发事件的同时传参的
  • 创建04-cpt.vue子组件，内置封装好方法emit发射this.$emit("通道名称,要发送的数据,...)
<template>
  <div class="box">
    <h3>标题：{{ title }}</h3>
    <p>价格:{{price}}元</p>
    <p>开业大酬宾,全场{{num}}折</p>
    <h4>库存:{{ kc }}件</h4>
    <button @click="fn">卖一件</button>
  </div>
</template>

<script>
export default {
    // 特别封装：如何设置所谓的形参
    props:["title","price","num","kc","id"],//1.👈👈👈👈设置形参id
    methods:{
        fn(){
            // 👇👇👇👇👇发送：内置封装好方法emit发射this.$emit("通道名称,要发送的数据,...)
            this.$emit("aaa",this.id);
        }
    }
}
</script>
<style scoped>
    .box{
        border:1px solid black;
    }
</style>
  • ②、父组件给子组件注册一个自定义事件、父组件可以给子组件设置相应的接受通道名称
<template>
  <div>
    <h1>超市商品列表:</h1>
    <!-- 商品数据:后台给的list数组 -->
    <p v-for="item in list" :key="item.id" >{{ item.title }} 库存:{{ item.kc }}</p>
    <hr>
    <cpt-4 
      v-for="item in list" 
      :key="item.id" 
      :title="item.title" 
      :price="item.price" 
      :num="item.num"
      :kc="item.kc"
      :id="item.id"

      @aaa="fnn"
    ></cpt-4>
    <!-- @aaa="fnn"👉👉👉👉👉@通道名称="执行函数"  执行函数(形参){拿到发送过来的数据}-->
  </div>
</template>
  • ③、父组件并提供对应的函数接收参数
<script>
export default {
  methods:{
    fnn(id){
      console.log(id);
    }
  },
}
</script>
  • App.vue父组件里面调用cpt4子组件，父组件通过给子组件加属性传值。
<template>
  <div>
    <h1>超市商品列表:</h1>
    <!-- 商品数据:后台给的list数组 -->
    <p v-for="item in list" :key="item.id" >{{ item.title }} 库存:{{ item.kc }}</p>
    <hr>
    <cpt-4 
      v-for="item in list" 
      :key="item.id" 
      :title="item.title" 
      :price="item.price" 
      :num="item.num"
      :kc="item.kc"
      :id="item.id"

      @aaa="fnn"
    ></cpt-4>
    <!-- @通道名称="执行函数"  执行函数(形参){拿到发送过来的数据}-->
  </div>
</template>

<script>
import cpt4 from "./components/04-cpt.vue";
export default {
  components:{
    cpt4,
  },
  methods:{
    fnn(id){
      console.log(id);
    }
  },
  data(){
    return{
      title:"火鸡面",
      price:10,
      num:5,
      list:[
        {id:1,title:"good-1",price:10,num:8,kc:10,},
        {id:2,title:"good-2",price:88,num:8,kc:33,},
        {id:3,title:"good-3",price:99,num:8,kc:66,},
      ]
    }
  }
}
</script>

（三）props 校验

  • props 是父传子, 传递给子组件的数据, 为了提高 子组件被使用时 的稳定性, 可以进行props校验, 验证传递的数据是否符合要求。
  • 默认的数组形式, 不会进行校验, 如果希望校验, 需要提供对象形式的 props
  • 创建05-cpt.vue子组件，设置形参以及对象配置的要求。
<template>
  <div>
    <h1>数量:{{ num }}</h1>
  </div>
</template>
<script>
export default {
  props:{
    //形参名称:对象配置有要求
    num:{
      type:Number,//数字类型
      require:true,//必传项
      default:100,//默认值
    }
  }
}
</script>
  • App.vue父组件里面调用cpt5子组件，父组件通过给子组件加属性传值。
<template>
  <div>
    <h1>超市商品列表:</h1>
    <cpt-5 num="800"></cpt-5>
  </div>
</template>
<script>
import cpt5 from "./components/05-cpt.vue";
export default {
  components:{
    cpt5,
  },
}
</script>

在这里插入图片描述在这里插入图片描述

  • props 提供了多种数据验证方案，例如：
  • 基础的类型检查 Number
  • 多个可能的类型 [String, Number]
  • 必填项校验 required: true
  • 默认值 default: 100
  • 自定义验证函数

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

DevExpress WPF Tree List组件，让数据可视化程度更高！（二）

DevExpress WPF Tree List组件，让数据可视化程度更高！（二）

DevExpress WPF Tree List组件是一个功能齐全、数据感知的TreeView-ListView混合体&#xff0c;可以把数据信息显示为REE、GRID或两者的组合&#xff0c;在数据绑定或非绑定模式下&#xff0c;具有完整的数据编辑支持。 在上文中&#xff08;点击这里回顾DevExpress WPF Tree …
阅读更多...
【如何更加高效从容地管理应用程序安全？《Python全栈安全》告诉你】

【如何更加高效从容地管理应用程序安全？《Python全栈安全》告诉你】

安全是一个全栈性问题&#xff0c;包括用户接口、API、Web服务器、网络基础设施等。通过掌握强大的库、框架以及Python生态系统中的工具&#xff0c;你可自上而下地保护自己的系统。本书列举大量实例&#xff0c;插图清晰&#xff0c;代码丰富&#xff0c;准确地告诉你如何保护…
阅读更多...
【javaSE】 抽象类

【javaSE】 抽象类

目录 抽象类概念 抽象类语法 抽象类特性 1. 抽象类不能直接实例化对象 2. 抽象方法不能是 private 的 3. 抽象方法不能被final和static修饰 4. 抽象类必须被继承&#xff0c;并且继承后子类要重写父类中的抽象方法 5. 抽象类中不一定包含抽象方法&#xff0c;但是有抽象…
阅读更多...
k8s部署xxl-job分布式任务调度服务

k8s部署xxl-job分布式任务调度服务

一、背景 什么时候需要把xxl-job部署到k8s里 当你的java服务部署到K8S后&#xff0c;因为xxl-job的任务调度器需要对注册上来的执行器进行健康检测&#xff0c;而java服务作为执行器&#xff0c;注册地址是pod的Ip地址&#xff1b;所以&#xff0c;调度器想要访问执行器的网路…
阅读更多...
自动化测试的生命周期是什么？ qt

自动化测试的生命周期是什么？ qt

&#xfeff;Java版知识付费源码 Spring CloudSpring BootMybatisuniapp前后端分离实现知识付费平台 提供职业教育、企业培训、知识付费系统搭建服务。系统功能包含&#xff1a;录播课、直播课、题库、营销、公司组织架构、员工入职培训等。 提供私有化部署&#xff0c;免费售…
阅读更多...
台式机/工控机通过网线共享笔记本电脑无线网络linux系统下 usb网卡的驱动安装

台式机/工控机通过网线共享笔记本电脑无线网络linux系统下 usb网卡的驱动安装

一、台式机/工控机通过网线共享笔记本电脑无线网络 1、 将台式机通过网线和笔记本连接。 2、 将笔记本的“本地连接”和“无线网络连接”的ipv4均设置为自动获取。 4.修改台式机的IP地址为如下&#xff08;对应笔记本信息&#xff09; IP地址为192.168.XXX.12 子网掩码为255.2…
阅读更多...
JavaSE【继承、初始化、pretected封装、组合】

JavaSE【继承、初始化、pretected封装、组合】

一、继承 继承 (inheritance) 机制 &#xff1a;是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特 性 的基础上进行扩展&#xff0c;增加新功能 &#xff0c;这样产生新的类&#xff0c;称 派生类 。 继承呈现了面向对象程序设计的层次结…
阅读更多...
MP4如何转MP3？教你简单好用的转换方法

MP4如何转MP3？教你简单好用的转换方法

怎么将MP4格式的视频转换成MP3音频呢&#xff1f;相信大家在看短视频的时候&#xff0c;有的视频背景音乐非常好听&#xff0c;我们又搜不到这个音频的源声在哪里&#xff0c;这时候我们就可以将这段视频直接转换成MP3格式音频&#xff0c;用来当做铃声或者是闹钟非常合适&…
阅读更多...
Python web实战之 Django 的 MVC 设计模式详解

Python web实战之 Django 的 MVC 设计模式详解

技术栈&#xff1a;Python、Django、HTML、CSS、JavaScript。 概要 在 Web 开发中&#xff0c;MVC&#xff08;Model-View-Controller&#xff09;模式是一种非常常见的设计模式&#xff0c;它可以帮助我们更好地管理代码&#xff0c;提高代码的可维护性。今天就介绍如何使用 …
阅读更多...
量子力学的应用：量子通信和量子感应

量子力学的应用：量子通信和量子感应

亲爱的读者&#xff0c; 欢迎回到我们的量子力学系列文章。在前面的几篇文章中&#xff0c;我们已经深入探讨了量子力学的起源、基本概念、实验验证以及解释问题&#xff0c;以及量子计算的应用。今天&#xff0c;我们将继续探讨量子力学的另外两个引人注目的应用领域&#xf…
阅读更多...
ubuntu git操作记录设置ssh key

ubuntu git操作记录设置ssh key

用到的命令&#xff1a; 安装git sudo apt-get install git配置git用户和邮箱 git config --global user.name “用户名” git config --global user.email “邮箱地址”安装ssh sudo apt-get install ssh然后查看安装状态&#xff1a; ps -e | grep sshd4. 查看有无ssh k…
阅读更多...
最新补丁让OpenBSD终于能够进行AMD CPU微码更新

最新补丁让OpenBSD终于能够进行AMD CPU微码更新

导读最新的 OpenBSD”current”代码终于开始支持 AMD CPU 微代码更新。 通过本周末合并到 OpenBSD 中的一组补丁&#xff0c;现在用户可以更新 AMD 处理器的 CPU 微代码了。 ports/sysutils/firmware/amd 也被添加进来&#xff0c;用于推送所有的 AMD CPU 微代码二进制文件。 …
阅读更多...
基于照片对天线进行全波分析（详细分解步骤）

基于照片对天线进行全波分析（详细分解步骤）

诸如NFC、RFID和物联网系统传感器等无线应用均受益于印刷在塑料基板上的低成本天线。然而&#xff0c;当天线集成到系统中时&#xff0c;数据手册的指标与天线的实际行为及其与相邻结构的相互作用之间通常存在不匹配现象。在这种情况下&#xff0c;就需要执行更高级的分析&…
阅读更多...
【严重】Smartbi商业智能BI软件权限绕过漏洞

【严重】Smartbi商业智能BI软件权限绕过漏洞

漏洞描述 Smartbi是一款商业智能应用&#xff0c;提供了数据集成、分析、可视化等功能&#xff0c;帮助用户理解和使用他们的数据进行决策。 在Smartbi受影响版本中存在权限绕过问题&#xff0c;未授权的攻击者可以通过 RMI 的方式调用 getPassword 接口获取管理员token信息。…
阅读更多...
高忆管理：创业板中签第一天卖吗？

高忆管理：创业板中签第一天卖吗？

跟着科技进步和改革开放的深入发展&#xff0c;我国的股票商场继续火热。随之而来的是越来越多的新股发行。关于股民们来说&#xff0c;怎么抢到新股成为了一个热点话题。在最近的一次创业板新股发行中&#xff0c;中签率再创新高&#xff0c;让不少股民欣喜不已。但是&#xf…
阅读更多...
二、JVM-深入运行时数据区

二、JVM-深入运行时数据区

深入运行时数据区 计算机体系结构 JVM的设计实际上遵循了遵循冯诺依曼计算机结构 CPU与内存交互图&#xff1a; 硬件一致性协议&#xff1a; MSI、MESI、MOSI、Synapse、Firely、DragonProtocol 摩尔定律 摩尔定律是由英特尔(Intel)创始人之一戈登摩尔(Gordon Moore)提出来…
阅读更多...
输入框长度在XSS测试中如何绕过字符长度限制

输入框长度在XSS测试中如何绕过字符长度限制

大家好&#xff0c;这是我编写的第一篇文章&#xff0c;之所以会分享这个故事&#xff0c;是因为我花了几个晚上的时间&#xff0c;终于找到了解决某个问题的方法。故事如下&#xff1a; 几个月前&#xff0c;我被邀请参加一个非公共的漏洞悬赏项目&#xff0c;在初期发现了一些…
阅读更多...
汽车行业案例 | 联合汽车电子全新质量问题管理平台上线，燕千云助力汽车电子领军者实现数字化质量管理

汽车行业案例 | 联合汽车电子全新质量问题管理平台上线，燕千云助力汽车电子领军者实现数字化质量管理

据权威调研机构显示&#xff0c;2022年中国智能电动汽车的销量已占新能源汽车的52%以上。到2025年&#xff0c;在新能源汽车50%的汽车出行市场渗透率的基础上&#xff0c;智能电动汽车的销量将超1220万辆&#xff0c;占新能源汽车的80.1%。在技术进步和产业变革快速推进的背景下…
阅读更多...
curl命令详解及设置代理服务器

curl命令详解及设置代理服务器

目录 概述 Linux Curl命令详解 Curl命令参数 Curl模仿浏览器命令 Curl模仿浏览器详解 模仿浏览器 Curl伪造refer命令 Curl伪造refer详解 伪造refer Curl下载文件或网页详解 Curl下载进度条命令 Curl下载进度条详解 Curl断点续传命令 Curl断点续传详解 断点续传 …
阅读更多...
Kubernetes客户端认证—— 基于CA证书的双向认证方式

Kubernetes客户端认证—— 基于CA证书的双向认证方式

1、Kubernetes 认证方式 Kubernetes集群的访问权限控制由API Server负责&#xff0c;API Server的访问权限控制由身份验证(Authentication)、授权(Authorization)和准入控制&#xff08;Admission control&#xff09;三个步骤组成&#xff0c;这个三个步骤是按序进行的&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023