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

一、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
  • 自定义验证函数

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

KubeSphere 3.4.0 发布：支持 K8s v1.26

KubeSphere 3.4.0 发布：支持 K8s v1.26

2023 年 07 月 26 日&#xff0c;KubeSphere 开源社区激动地向大家宣布&#xff0c;KubeSphere 3.4.0 正式发布&#xff01; 让我们先简单回顾下之前三个大版本的主要变化&#xff1a; KubeSphere 3.1.0 新增了“边缘计算”、“计量计费” 等功能&#xff0c;将 Kubernetes 从…
阅读更多...
myeclipse的Debug模式

myeclipse的Debug模式

1.表示当前实现继续运行直到下一个断点&#xff0c;快捷键为F8。 2.表示打断整个进程 3.表示进入当前方法&#xff0c;快捷键为F5。 4.表示运行下一行代码&#xff0c;快捷键为F6。 5.表示退出当前方法&#xff0c;返回到调用层&#xff0c;快捷键为F7。 6.表示当前线程的…
阅读更多...
kotlin 编写一个简单的天气预报app（五）增加forcast接口并显示

kotlin 编写一个简单的天气预报app（五）增加forcast接口并显示

参考资料 OpenWeatherMap提供了一个/forecast接口&#xff0c;用于获取未来几天的天气预报。你可以使用HTTP GET请求访问该接口&#xff0c;并根据你所在的城市或地理坐标获取相应的天气数据。 以下是一个示例请求的URL和一些常用的参数&#xff1a; URL: http://api.openwe…
阅读更多...
我的创作纪念日——256天

我的创作纪念日——256天

机缘 最开始我写博客没有什么特别的原因&#xff0c;主要是因为以下几点&#xff1a; 练习自己的语言组织能力 记录自己学习生活中学到的知识 为和我同一个学习阶段的朋友提供帮助 事实上最开始我根本不指望我的博客有多少人看&#xff0c;主要是想找一个好的保存 Markdown 笔…
阅读更多...
花费7元训练自己的GPT 2模型

花费7元训练自己的GPT 2模型

在上一篇博客中&#xff0c;我介绍了用Tensorflow来重现GPT 1的模型和训练的过程。这次我打算用Pytorch来重现GPT 2的模型并从头进行训练。 GPT 2的模型相比GPT 1的改进并不多&#xff0c;主要在以下方面&#xff1a; 1. GPT 2把layer normalization放在每个decoder block的前…
阅读更多...
PHP最简单自定义自己的框架（一）

PHP最简单自定义自己的框架（一）

为啥要定义自己的框架&#xff1a; 定制化需求&#xff1a;每个项目都有不同的需求和特点&#xff0c;使用通用的框架可能无法满足所有的要求。自定义框架可以根据具体需求进行定制&#xff0c;提供更加灵活和符合项目需求的解决方案。学习和成长&#xff1a;自定义框架是一个很…
阅读更多...
STM32存储左右互搏 I2C总线读写EEPROM ZD24C1MA

STM32存储左右互搏 I2C总线读写EEPROM ZD24C1MA

STM32存储左右互搏 I2C总线读写EEPROM ZD24C1MA 在较低容量存储领域&#xff0c;EEPROM是常用的存储介质&#xff0c;不同容量的EEPROM的地址对应位数不同&#xff0c;在发送字节的格式上有所区别。EEPROM是非快速访问存储&#xff0c;因为EEPROM按页进行组织&#xff0c;在连…
阅读更多...
一文搞懂Redis架构演化之路

一文搞懂Redis架构演化之路

目录 从最简单的开始&#xff1a;单机版 Redis 数据持久化&#xff1a;有备无患 主从复制&#xff1a;多副本 哨兵&#xff1a;故障自动切换 分片集群&#xff1a;横向扩展 总结 这篇文章我想和你聊一聊 Redis 的架构演化之路。 现如今 Redis 变得越来越流行&#xff0c;…
阅读更多...
图为科技加入深圳市智能交通行业协会 ，打 …

图为科技加入深圳市智能交通行业协会 ，打 …

图为科技加入深圳市智能交通行业协会&#xff0c;打造智能交通新生态&#xff01; 交通是国民经济发展的“大动脉”&#xff0c;交通拥堵、事故频发等问题不仅影响了人们的出行体验&#xff0c;也对经济的发展产生了负面影响。安全、高效、便捷的出行&#xff0c;一直是人们的…
阅读更多...
【Unity实用插件篇】| 学会使用 可编程瓦片Tile Map，快速搭建2D地图

【Unity实用插件篇】| 学会使用 可编程瓦片Tile Map，快速搭建2D地图

前言【Unity 实用插件篇】| 学会使用 可编程瓦片Tile Map，快速搭建2D地图一、导入 Tile Map Editor二、创建调色板 Tile Palette三、快速绘制地图四、TilePalette 调色板功能介绍五、TileMap 相关组件属性介绍GirdTilemapTilemap Renderer 瓦片地图渲染器Tile Assets 瓦片资源…
阅读更多...
【Git】分支管理策略

【Git】分支管理策略

文章目录 分支策略bug分支-master分支出现bug怎么办删除临时分⽀小结 分支策略 在实际开发中&#xff0c;我们应该按照⼏个基本原则进⾏分⽀管理&#xff1a; 1.master分⽀应该是⾮常稳定的&#xff0c;也就是仅⽤来发布新版本&#xff0c;平时不能在上⾯⼲活 2.⼲活都在dev…
阅读更多...
Reinforcement Learning with Code 【Code 2. Tabular Sarsa】

Reinforcement Learning with Code 【Code 2. Tabular Sarsa】

Reinforcement Learning with Code 【Code 2. Tabular Sarsa】 This note records how the author begin to learn RL. Both theoretical understanding and code practice are presented. Many material are referenced such as ZhaoShiyu’s Mathematical Foundation of Rei…
阅读更多...
Elasticsearch 全文检索 分词检索-Elasticsearch文章四

Elasticsearch 全文检索 分词检索-Elasticsearch文章四

文章目录 官方文档地址refercence文档全文搜索体系match简单查询match 多词/分词单字段分词match多个词的逻辑控制match的匹配精度match_pharse_prefix分词前缀方式match_bool_prefixmulti_match多字段匹配 query string类型Interval类型DSL查询之Term详解聚合查询之Bucket聚合…
阅读更多...
RTT（RT-Thread）线程管理（1.2W字详细讲解）

RTT（RT-Thread）线程管理（1.2W字详细讲解）

目录 RTT线程管理 线程管理特点 线程工作机制 线程控制块 线程属性 线程状态之间切换 线程相关操作 创建和删除线程 创建线程 删除线程 动态创建线程实例 启动线程 初始化和脱离线程 初始化线程 脱离线程 静态创建线程实例 线程辅助函数 获得当前线程 让出处…
阅读更多...
【LeetCode】446. 等差数列划分II -- 子序列

【LeetCode】446. 等差数列划分II -- 子序列

题目链接 文章目录 1. 思路讲解1.1 dp表的创建1.2 状态转移方程1.3 使用哈希表找到k1.4 初始化1.5 返回值1.6 该题坑爹的一点 2. 代码编写 1. 思路讲解 我们要知道以某个位置为结尾的子序列的数量&#xff0c;可以通过它的以上一位置的为结尾的子序列的数量得知&#xff0c;也…
阅读更多...
css3 hover border 流动效果

css3 hover border 流动效果

/* Hover 边线流动 */.hoverDrawLine {border: 0 !important;position: relative;border-radius: 5px;--border-color: #60daaa; } .hoverDrawLine::before, .hoverDrawLine::after {box-sizing: border-box;content: ;position: absolute;border: 2px solid transparent;borde…
阅读更多...
Linux第八章之进程概念

Linux第八章之进程概念

一、冯诺依曼体系结构 关于冯诺依曼&#xff0c;必须强调几点&#xff1a; 这里的存储器指的是内存不考虑缓存情况&#xff0c;这里的CPU能且只能对内存进行读写&#xff0c;不能访问外设(输入或输出设备)外设(输入或输出设备)要输入或者输出数据&#xff0c;也只能写入内存或…
阅读更多...
加强Web应用程序安全：防止SQL注入

加强Web应用程序安全：防止SQL注入

数据库在Web应用程序中存储和组织数据时起着至关重要的作用&#xff0c;它是存储用户信息、内容和其他应用程序数据的中央存储库。而数据库实现了高效的数据检索、操作和管理&#xff0c;使Web应用程序能够向用户提供动态和个性化的内容。然而&#xff0c;数据库和网络应用程序…
阅读更多...
SQL Developer中的Active Data Guard

SQL Developer中的Active Data Guard

这篇文章 Display Data Guard configuration in SQL Developer 中&#xff0c;用SQL Developer展示了多种ADG的拓扑。 今天自己也试了一下&#xff0c;还蛮简单的&#xff0c;其实最麻烦的部分在于搭建一个ADG环境。 假设我已有一个ADG环境&#xff0c;即最典型的环境&#x…
阅读更多...
简要介绍 | 生成模型的演进：从自编码器(AE)到变分自编码器(VAE)和生成对抗网络(GAN)，再到扩散模型

简要介绍 | 生成模型的演进：从自编码器(AE)到变分自编码器(VAE)和生成对抗网络(GAN)，再到扩散模型

注1：本文系“简要介绍”系列之一，仅从概念上对生成模型（包括AE, VAE, GAN，以及扩散模型）进行非常简要的介绍，不适合用于深入和详细的了解。 生成模型的演进：从自编码器(AE)到变分自编码器(VAE)和生成对抗网络(GAN)，再到扩散模型 一、背景介绍 生成模型在机器学习领域…
阅读更多...
最新文章

Copyright @ 2022~2023