vue学习笔记之组件传值

说起组件传值,首先要介绍再vue中什么是组件。

组件(Component),是vue中很强大的一个功能,可以将一些可重用的代码进行重用。所有的vue组件同时也是vue实例,可以接受使用相同的选项对象和提供相同的生命周期钩子。用一句话来概括:组件就是可以扩展的HTML元素,封装可重用的HTML代码,可以将组件看做自定义的HTML元素。在vue项目中,所有.vue结尾的文件都是一个组件。

注意:注意组件和hooks的区别,一句话来说:组件是封装UI的,hooks的封装逻辑的。

组件分类

组件可以分为两类,分别是局部组件和全局组件

(1)局部组件

引入组件后,需要在components对象里进行注册,注册后可以直接进行使用。(注意:在setup语法糖出来之前是这样的,但是在使用了setup语法糖后,就不需要进行注册了,引入后可以直接使用)

插入setup语法糖的相关知识:<script setup>
Vue 3 引入了一个新的 <script setup> 语法,它提供了一种更简洁的方式来编写组件。在使用 <script setup> 时,你可以通过 import 语句直接引入组件,而无需显式注册。然后,你就可以在模板中直接使用这些组件了:

<template>  <my-component />  
</template>  <script setup>  
import MyComponent from './MyComponent.vue';  
// 在这里直接引入组件,模板中即可使用,无需注册步骤  
</script>

请注意,<script setup> 是 Vue 3.2+ 中的一项实验性功能,它简化了组件的编写方式。在这个语法中,导入的组件会自动在模板中可用,无需显式在 components 选项中注册。

综上所述,虽然 Vue 3 中的组件注册方式有所变化,但无论是全局还是局部注册,或者是使用 <script setup>,你仍然需要以某种方式“引入”或“注册”你的组件,以便在模板中使用它们。

转回来,在局部组件中,我们引入组件后,需要在components对象里进行注册,注册后可以直接进行使用。

上代码:
 

<template><div><div>使用组件</div><!-- <TestComponent :num="num"></TestComponent> --><TestComponent num2="2" @handle="handle2('666',$event)"></TestComponent><!-- <TestComponent></TestComponent><TestComponent></TestComponent> --><button @click="num+=1">加一</button><GlobalComponent Mypro="编辑" color="red" :num="num"></GlobalComponent><GlobalComponent Mypro="修改" color="blue"></GlobalComponent><GlobalComponent Mypro="删除" color="yellow"></GlobalComponent></div>
</template><script>
import TestComponent from './testComponent.vue';
// import testComponent from './testComponent.vue';export default {data(){return{num:1}},components:{TestComponent},methods:{handle2(parent,child){console.log('父组件传递的数据',parent);console.log('子组件传递的数据',child);}}
}</script><style></style>

在代码中,TestComponent就是一个局部组件,在script中进行注册,在template中以标签的形式进行使用。

我们看一下TestComponent.vue的内容

 (2)全局组件

这里的重点不是将什么是全局组件,什么是局部组件,下面也是简单介绍一下全局组件的注册与使用,注意它和局部组件的注册是不同的。
在 Vue 2 中,全局注册一个组件:
Vue.component('my-component', MyComponent);


在 Vue 3 中,由于没有了全局的 Vue 实例,你需要通过应用实例(由 createApp 创建)来全局注册组件:
import { createApp } from 'vue';  
import MyComponent from './MyComponent.vue';  
  
const app = createApp({});  
  
app.component('my-component', MyComponent);  
  
app.mount('#app');

组件传值

下面来到重点,组件传值,总体可以分为三类:父与子,祖与孙,兄弟之间的传值。

注意:在组件之间的关系,比如父子关系是相对的,一个组件是另一个组件的父组件,但是这个父组件也可能是其他组件的子组件或孙组件等。

①父传子

一句话概括:在父组件的子组件标签上定义属性,子组件使用props接收

上代码:

在该组件中,我们使用了TestComponent组件,那么这个组件和使用的组件之间就构成了父子关系,我们想给子组件 TestComponent组件传值(父传子),就需要在子组件的标签竖向上写上传递的属性(注意:此属性以子组件为准)num2,其值为2,那么来到子组件这边。

使用props进行接收,它右边的接收形式有两种,一种是数组,另一种是对象,只不过对象那个没必要,就使用常用的数组形式即可。(注意:这里传递过来的属性需要加引号,小编就因为没有加引号报错了)。

 这样,父传子就成功传递了。

②子传父

通过事件传递,子组件使用$emit传递一个事件给父组件。$emit第一个参数是事件名,第二个参数要传给父组件的参数。父组件在子组件标签上使用@接收传过来的事件

上代码:

在子组件中传递一个事件

子组件传递了handle事件,并且传递了一个值123

来到父组件这里,

 使用@符号加上子组件传递过来的事件名,在父组件中,也传递了自己的值,如果想要获取子组件传递过来的值,和一开始的事件默认事件一样,也是使用$event。

来看效果:

来看handle2的代码:

 第一个参数是父组件自己传递的值,后面的是$event获取的子组件的值。

③祖孙传值

provide / inject 依赖注入
provide:可以让我们指定想要提供给后代组件的数据或方法
inject:在任何后代组件中接收想要添加在这个组件上的数据或方法,不管组件嵌套多深都可以直接拿来用

先看结构关系

grandFather.vue

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2024-07-07 19:04:28* @LastEditors: Mei* @LastEditTime: 2024-07-07 20:10:22* @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\grantFather.vue* @Description: * * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template><div><Parent></Parent></div>
</template><script>
import Parent from "./parent.vue"export default {components:{Parent},provide(){return{name:"张三"}}
}</script><style scoped></style>

 parent.vue

<template><div><Son></Son></div>
</template><script>
import Son from "./son.vue"
export default {
components:{Son
}
}</script><style scoped></style>

son.vue

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2024-07-07 19:03:41* @LastEditors: Mei* @LastEditTime: 2024-07-07 19:15:10* @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\son.vue* @Description: * * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template><div>我是后代组件--{{ name }}</div>
</template><script>
export default {inject:['name']
}</script><style scoped></style>

来看运行效果,在祖先组件中,我们使用了parent组件,而在parent组件中,使用了son组件,这样就构成了祖孙关系,在上级组件进行provide下发name,而在后代组件中使用inject进行注入。

在vue调试工具中也可以看到下发的name属性

 ④兄弟传值

一般使用状态管理解决
event bus
EventBus 是中央事件总线,不管是父子组件,兄弟组件,跨层级组件等都可以使用它完成通信操作。
在 Vue 3 中,由于 Vue 2 中的全局事件总线(Vue.prototype.$emit 和 Vue.prototype.$on)被移除,我们需要使用其他方式来实现类似的功能。在 Vue 3 中,可以使用 mitt 这个第三方库来创建一个事件总线。

介绍一下使用Vuex实现兄弟传值

在Vue.js项目中,Vuex通常被用作状态管理库,尤其是在大型或复杂的应用中,它提供了一种集中管理所有组件共享状态的方式。对于兄弟组件之间的通信,Vuex可以作为一个很好的解决方案,因为它允许状态被全局访问和修改。

1. 安装和设置Vuex


首先,确保你的项目中已经安装了Vuex。如果还没有安装,可以通过npm或yarn来安装:


npm install vuex --save  
# 或者  
yarn add vuex


然后,在你的Vue项目中设置Vuex。通常,这会在src/store目录下完成,但你可以根据项目的需要进行调整。

2.使用Vuex并配置store


// src/store/index.js  
import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
export default new Vuex.Store({  
  state: {  
    message: ''  
  },  
  mutations: {  
    setMessage(state, message) {  
      state.message = message;  
    }  
  }  
});


3. 在Vue实例中使用Vuex


在你的Vue实例(通常是main.js或app.js)中,你需要引入并使用Vuex store。


// src/main.js  
import Vue from 'vue';  
import App from './App.vue';  
import store from './store';  
  
new Vue({  
  store,  
  render: h => h(App),  
}).$mount('#app');


4.在兄弟组件中使用Vuex


假设你有两个兄弟组件BrotherOne.vue和BrotherTwo.vue,你想从BrotherOne传递一个消息到BrotherTwo。

BrotherOne.vue

<template>  <div>  <input v-model="localMessage" @input="updateMessage">  <button @click="sendMessage">Send Message</button>  </div>  
</template>  <script>  
export default {  data() {  return {  localMessage: ''  };  },  methods: {  updateMessage() {  // 这里可以添加逻辑来过滤或格式化消息  },  sendMessage() {  this.$store.commit('setMessage', this.localMessage);  }  }  
};  
</script>


BrotherTwo.vue

<template>  <div>  <p>Received Message: {{ message }}</p>  </div>  
</template>  <script>  
export default {  computed: {  message() {  return this.$store.state.message;  }  }  
};  
</script>


BrotherOne组件通过input和button来更新和发送消息。当点击按钮时,它调用this.$store.commit('setMessage', this.localMessage);来触发Vuex中的setMessage mutation,该mutation将新的消息存储在Vuex的state中。

BrotherTwo组件则通过计算属性message来监听Vuex state中的message变化,并实时显示在页面上。

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

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

相关文章

集合复习(java)

文章目录 Collection 接口Collection结构图Collection接口中的方法Iterator 与 Iterable 接口Collection集合遍历方式迭代器遍历增强 for 遍历 List&#xff08;线性表&#xff09;List特有方法ArrayList&#xff08;可变数组&#xff09;ArrayList 底层原理ArrayList 底层原理…

JAVA集合框架、CAS、AQS

目录 一、java 的集合框架有哪些? 二、说-下 ArrayList 和 LinkedList? 三、HashSet和TreeSet的区别? 四、HashMap 的数据结构是什么? 五、CAS机制 六、AQS理解 一、java 的集合框架有哪些? Collection 是 Java 集合框架中的一个根接口&#xff0c;位于 java.util 包中。它…

【SVN的使用-源代码管理工具-命令行的使用 Objective-C语言】

一、接下来,我们来说一个终端的命令行的使用, 1.我们说,你的电脑里边呢,有终端, 在Mac里边,你想新建一个txt,应该怎么写,对,打开文本编辑, 打开这个东西,写点儿东西,然后保存一下,保存的时候,你还要去选择格式, 现在,如果我们用命令行,可以更方便一些, 2.首…

【基于R语言群体遗传学】-10-适应性与正选择

在之前的博客中&#xff0c;我们学习了哈代温伯格模型&#xff0c;学习了Fisher模型&#xff0c;学习了遗传漂变与变异的模型&#xff0c;没有看过之前内容的朋友可以先看一下之前的文章&#xff1a; 群体遗传学_tRNA做科研的博客-CSDN博客 一些新名词 &#xff08;1&#xf…

MySQL 中的 DDL、DML、DQL 和 DCL

文章目录 1. 数据定义语言&#xff08;DDL&#xff09;2. 数据操作语言&#xff08;DML&#xff09;3. 数据查询语言&#xff08;DQL&#xff09;4. 数据控制语言&#xff08;DCL&#xff09;总结 在 MySQL 数据库管理系统中&#xff0c;SQL 语句可以根据其功能分为不同的类别&…

RAG 案框架(Qanything、RAGFlow、FastGPT、智谱RAG)对比

各家的技术方案 有道的QAnything 亮点在&#xff1a;rerank RAGFLow 亮点在&#xff1a;数据处理index 智谱AI 亮点在文档解析、切片、query改写及recall模型的微调 FastGPT 优点&#xff1a;灵活性更高 下面分别按照模块比较各框架的却别 功能模块QAnythingRAGFLowFastG…

TP8/6 子域名绑定应用

原www.xxx.com/admin改为admincms.xxx.com config/app.php 官方文档&#xff1a;ThinkPHP官方手册

赋值运算符重载和const成员函数和 const函数

文章目录 1.运算符重载(1)(2)运算符重载的语法&#xff1a;(3)运算符重载的注意事项&#xff1a;(4)前置和后置重载区别 2.const成员函数3.取地址及const取地址操作符重载4.总结 1.运算符重载 (1) 我们知道内置类型(整形&#xff0c;字符型&#xff0c;浮点型…)可以进行一系…

2024-07-05 base SAS programming学习笔记9(variables)

1.在数据集增加累加变量值&#xff08;SUM&#xff09; 求和语句(SUM STATEMENT)&#xff1a;variableexpression variable是累积求和的变量名&#xff0c;为数值型&#xff0c;默认初始值为0&#xff1b;该variable值则会保留到一个观测 当expression有缺失值&#xff0c;在求…

【项目管理】常见的敏捷实践:Scrum框架

【项目管理】常见的敏捷实践&#xff1a;Scrum框架 精益、敏捷与Scrum框架Scrum框架实践Sprint&#xff08;冲刺&#xff09;Scrum角色Scrum工件Scrum会议 精益、敏捷与Scrum框架 敏捷与精益思想、看板、Scrum等概念的关系如下图所示&#xff1a; Lean 精益 Kanban 看板 Ag…

文件存储的方法一

文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了"如何实现本地存储"相关的内容&#xff0c;本章回中将介绍如何实现文件存储.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在上一章回中介绍的本地存储只能存储dart语言中基本类型的数值…

机器学习训练之使用静态图加速

前言 MindSpore有两种运行模式&#xff1a;动态图模式和静态图模式。默认情况下是动态图模式&#xff0c;也可以手工切换为静态图模式。 动态图模式 动态图的特点是计算图的构建和计算同时发生&#xff0c;符合Python的解释执行方式。在调试模型时较为方便&#xff0c;能够实…

开发者评测|操作系统智能助手OS Copilot

操作系统智能助手OS Copilot 文章目录 操作系统智能助手OS CopilotOS Copilot 是什么优势功能 操作步骤创建实验重置密码创建Access Key配置安全组安装 os-copilot环境变量配置功能评测命令行模式多轮交互模式 OS Copilot 产品体验评测反馈OS Copilot 产品功能评测反馈 参考文档…

做测试/爬虫 selenium 元素定位 谷歌浏览器 插件推荐,提高元素定位效率

注:插件均在谷歌应用商店 下载 1.XPath Helper 插件 作用&#xff1a;用于Html中对目标字段或者属性值进行匹配 快捷启动&#xff1a;ctrl shift x 示例图如下&#xff1a; 2. ChroPath 插件 作用&#xff1a; 提高元素定位效率 启动&#xff1a;谷歌浏览器 按 F12 -&g…

【电商系统开发实用接口指南】包含国内国外多电商平台商品数据对接(附文档)

关于电商数据接口 开发电商系统的朋友对于电商平台API肯定不陌生&#xff0c;API接口即应用程序编程接口&#xff0c;电商平台开放部分API接口&#xff0c;供商家和服务商调用&#xff0c;以满足电商业务管理需求。随着电商市场需求的日益增长以及技术手段的不断成熟&#xf…

【C++第十课 - stack_queue】stack、queue的使用、适配器模型stack、queue和priority_queue的底层实现、deque

目录 一、stack使用1、push2、pop3、empty4、top题目1、最小栈2、栈的压入、弹出序3、逆波兰表达式求值 二、queue的使用priority_queue习题 三、适配器stack的底层实现queue的底层实现priority_queue的底层实现仿函数/函数对象函数指针 四、deque 一、stack使用 stack是个容器…

聚焦大模型应用落地,2024全球数字经济大会人工智能专题论坛在京举办

7月1日下午&#xff0c;2024全球数字经济大会人工智能专题论坛在中关村国家自主创新示范区会议中心举办。论坛紧扣大模型应用落地这一热点&#xff0c;以“应用即未来——大模型赋能千行百业&#xff0c;新生态拥抱产业未来”为主题&#xff0c;备受社会各界关注。 一、北京已…

Windows中Git的使用(2024最新版)

Windows中Git的使用 获取ssh keys本地绑定邮箱初始化本地仓库添加到本地缓存区提交到本地缓存区切换本地分支为main关联远程分支推送到GitHub查看推送日志 Git 2020年发布了新的默认分支名称"main"&#xff0c;取代了"master"作为主分支的名称。操作有了些…

【已解决】: fatal error: cuda_runtime_api.h: No such file or directory

既然他找不到&#xff0c;我们就把路径给他写清楚&#xff01; 检查自己是不是有这个文件&#xff1a; 去路径/usr/local下&#xff0c;使用命令查询是否拥有该文件&#xff1a; find . -name cuda_runtime_api.h结果&#xff1a; 因为我要使用的是cuda-11.3&#xff0c;因…

【Spring Cloud】一个例程快速了解网关Gateway的使用

Spring Cloud Gateway提供了一个在Spring生态系统之上构建的API网关&#xff0c;包括&#xff1a;Spring 5&#xff0c;Spring Boot 2和Project Reactor。Spring Cloud Gateway旨在提供一种简单而有效的路由方式&#xff0c;并为它们提供一些网关基本功能&#xff0c;例如&…