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.mfbz.cn/a/782955.html

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

相关文章

[Unity入门01] Unity基本操作

[Unity入门01] Unity基本操作

参考的傅老师的教程学了一下Unity的基础操作&#xff1a; [傅老師/Unity教學] Unity3D基礎入門 [華梵大學] 遊戲引擎應用基礎(Unity版本) Class#01 移动&#xff1a;鼠标中键旋转&#xff1a;鼠标右键放大&#xff1a;鼠标滚轮飞行模式&#xff1a;右键WASDQEFocus模式&…
阅读更多...
【机器学习】属性降维：揭示数据的简化之美

【机器学习】属性降维：揭示数据的简化之美

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 属性降维&#xff1a;揭示数据的简化之美引言什么是属性降维&#xff1f;为何降…
阅读更多...
linux学习week2+3

linux学习week2+3

linux学习 九.linux磁盘分区、挂载 3.磁盘情况查询 命令&#xff1a;df -h 注意&#xff1a;使用率到80%以上就要清理了 查询指定目录的磁盘占用情况&#xff1a;du -d 目录 其它参数&#xff1a; -s&#xff1a;指定目录占用大小汇总 -h&#xff1a;带计量单位 -a&#xff…
阅读更多...
lora/lycoris

lora/lycoris

Stable Diffusion 训练指南 (LyCORIS) | Coding HuskyStable Diffusion 文字生成图片的教程已经很多了。这篇文章是讲解如何用 Kohya Trainer 在 Google Colab 上训练一个 LyCORIS 模型。在读之前希望你已经至少玩过 Stable Diffusion。https://ericfu.me/stable-diffusion-fin…
阅读更多...
QFileSystemModel绑定到 QTreeView、 QListView、QTableView

QFileSystemModel绑定到 QTreeView、 QListView、QTableView

QFileSystemModel绑定到 QTreeView、 QListView、QTableView&#xff0c;实现文件的查看 .h文件 #ifndef FILESYSEXAMPLE_H #define FILESYSEXAMPLE_H#include <QMainWindow> #include <QFileSystemModel>namespace Ui { class FileSysExample; }class FileSysExam…
阅读更多...
Vuex的模块化编程

Vuex的模块化编程

1.之前我们使用store引入的时候不够简介&#xff0c;store为我们封装了方法 mapState:从state中获取数据,以数组的方式返回 mapGetters:从getters中获取方法,以数组的方式返回 mapMutations:从mutations中获取操作,以数组的方式返回 mapActions:从actions中获取动作,以数组的方…
阅读更多...
Hi3861 OpenHarmony嵌入式应用入门--MQTT

Hi3861 OpenHarmony嵌入式应用入门--MQTT

MQTT 是机器对机器(M2M)/物联网(IoT)连接协议。它被设计为一个极其轻量级的发布/订阅消息传输 协议。对于需要较小代码占用空间和/或网络带宽非常宝贵的远程连接非常有用&#xff0c;是专为受限设备和低带宽、 高延迟或不可靠的网络而设计。这些原则也使该协议成为新兴的“机器…
阅读更多...
PFC电路中MOS管的选取2

PFC电路中MOS管的选取2

上面这种驱动方式叫推挽驱动&#xff0c;或者图腾柱驱动 当芯片驱动脚 DRV为高电平时&#xff0c;此时回路中的源是芯片的 DRV引脚&#xff0c;芯片驱动电流从左往右流动&#xff0c;通过 R1&#xff0c;通过Q1的be脚&#xff0c;通过R3、R4给MOS管Q4的Cgs结电容充电 不过值得…
阅读更多...
Mybatis-Plus一文详解BaseMapper和Service 使用

Mybatis-Plus一文详解BaseMapper和Service 使用

Mybatis-Plus简介 MyBatis-Plus (opens new window)&#xff08;简称 MP&#xff09;是一个MyBatis (opens new window)的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 特性&#xff1a; 无侵入&#xff1a;只做增强不做…
阅读更多...
idea 默认路径修改

idea 默认路径修改

1.查看 idea 的安装路径&#xff08;右键点击 idea 图标&#xff0c;查看路径 &#xff09; “C:\Program Files\JetBrains\IntelliJ IDEA 2021.3.1\bin\idea64.exe” 在 bin 目录查看 idea.properties 文件&#xff0c;修改以下四个路径文件 # idea.config.path${user.home}/…
阅读更多...
Linux的前世今生

Linux的前世今生

Unix的起源和发展 1969年&#xff0c;AT&T贝尔实验室的Ken Thompson和Dennis Ritchie等人开发了Unix操作系统。Unix的设计理念强调小而简洁的工具&#xff0c;文本流和系统模块化&#xff0c;这些理念后来成为Linux开发的重要基础。1973年&#xff0c;Unix用C语言重新编写…
阅读更多...
昇思25天学习打卡营第17天 | K近邻算法实现红酒聚类

昇思25天学习打卡营第17天 | K近邻算法实现红酒聚类

内容介绍&#xff1a; K近邻算法&#xff08;K-Nearest-Neighbor, KNN&#xff09;是一种用于分类和回归的非参数统计方法&#xff0c;是机器学习最基础的算法之一。它正是基于以上思想&#xff1a;要确定一个样本的类别&#xff0c;可以计算它与所有训练样本的距离&#xff0…
阅读更多...
LVGL移植与VS模拟器使用

LVGL移植与VS模拟器使用

一、移植文件介绍 二、移植部分 第一步&#xff1a;创建LVGL文件夹 第二步&#xff1a; 构造LVGL文件夹&#xff1a;LVGL - GUI - lvgl - 第三步&#xff1a;添加文件 3.1 从examples中添加2个.c文件 3.2 从src中添加文件 draw文件 extra文件 第四步&#xff1a; 三、Ke…
阅读更多...
分享2个iPhone恢复照片的方法，赶紧码住收藏！

分享2个iPhone恢复照片的方法，赶紧码住收藏！

手机已经成为我们生活中不可或缺的一部分&#xff0c;它不仅仅是通讯工具&#xff0c;更是我们记录生活点滴的重要工具之一。然而&#xff0c;正如其他任何设备一样&#xff0c;iPhone上存储的照片有时也会不小心被删除或丢失。 别担心&#xff0c;即使你误删了重要的照片&…
阅读更多...
网安加·百家讲坛 | 马云卓：漏洞扫描工具漏洞报告对比

网安加·百家讲坛 | 马云卓：漏洞扫描工具漏洞报告对比

作者简介&#xff1a;马云卓&#xff0c;某安全公司安全专家&#xff0c;持有注册信息安全专业人员及渗透测试工程师&#xff08;CISP-PTE&#xff09;和项目管理专业人士&#xff08;PMP&#xff09;证书&#xff0c;拥有丰富的行业经验&#xff0c;长期专注于网络安全攻防技术…
阅读更多...
用SOLIDWORKS批量打印工程图纸，没有难度

用SOLIDWORKS批量打印工程图纸，没有难度

在工程师完成产品设计后&#xff0c;一般需要打印纸质工程图&#xff0c;如果打印的数量比较多&#xff0c;效率就会比较低&#xff0c;其实SOLIDWORKS软件提供了专用工具用来处理工作量比较大且重复性的工作&#xff0c;这个工具就是SOLIDWORKS Task Scheduler。 SOLIDWORKS T…
阅读更多...
css实现鼠标禁用（鼠标滑过显示红色禁止符号）

css实现鼠标禁用（鼠标滑过显示红色禁止符号）

css实现鼠标禁用&#xff08;鼠标滑过显示红色禁止符号&#xff09; 创作背景css鼠标禁用 创作背景 从本文开始&#xff0c;将会用三篇文章来一步一步实现 vueantdts实战后台管理系统中table表格的不可控操作。中间会补充两篇css知识文章 &#xff0c;方便后续功能的实现。 实…
阅读更多...
面向对象编程：定义、特点、应用场景、优缺点及示例代码

面向对象编程：定义、特点、应用场景、优缺点及示例代码

目录 前言1. 面向对象编程的定义2. 面向对象编程的特点2.1 封装2.2 继承2.3 多态2.4 抽象 3. 面向对象编程的应用场景3.1 大型软件系统3.2 GUI应用程序3.3 游戏开发 4. 面向对象编程的优缺点4.1 优点4.2 缺点 5. 代表性的编程语言5.1 Java5.2 C5.3 Python 6. 示例代码结语 前言…
阅读更多...
【爱上C++】vector用法详解

【爱上C++】vector用法详解

文章目录 一:vector简介二:vector的创建和初始化三:vector的遍历1.[]下标2.at()3.迭代器遍历4.范围for 四:vector的空间1.size2.max_size3.capacity4.reserve5.resize6.empty 五:vector的增删查改1.push_back2.pop_back3.find4.insert5.erase6.swap7.assign Hello~同学们好&…
阅读更多...
ESP32CAM物联网教学10

ESP32CAM物联网教学10

ESP32CAM物联网教学10 MicroPython 应用体验 小智偶然地发现&#xff0c;有一种新兴的编程模式MicroPython&#xff0c;也能编写ESP32Cam的应用程序了&#xff0c;于是欣然地体验了一把。 编程环境搭建 小智偶然地从下面这家店铺买了一块ESP32Cam&#xff0c;并从客服那里得到…
阅读更多...
最新文章

Copyright @ 2022~2023