vue3组件通信（父给子传参，子调用父的方法，父调用子的方法，顶层组件给底层组件传参，底层组件调用顶层组件的方法）

news2024/9/24 13:13:42

目录

1.父传子（父给子传参）

2.子传父（子调用父的方法）

3.父调用子的方法

4.顶层给底层传参，底层调用顶层的方法

5.模板引用

1.父传子（父给子传参）

①.步骤

父组件中给子组件通过绑定属性的方式传递往子组件的参数

子组件内部通过props选项进行接收

②.示例

父组件：

<script setup>
// 局部组件，导入之后就可以进行使用
import chlid from '@/components/child.vue'
import { ref } from 'vue';
const money = ref(50);
const add = () =>{
  money.value += 10;
}
</script>

<template>
  <div>
    <h3>父组件 {{ money }}
      <!-- 在父组件中改变了往子组件传递的值，子组件会接收到最新的值，并更新视图 -->
    <button @click="add"> 挣钱</button>
  </h3>
  <!-- 给子组件，以添加属性的方式进行传递，可以传递固定值或者动态值-->
    <chlid car = "BYD" :money = "money"></chlid>
  </div>
</template>

子组件：

<template>
<!-- 在模板中可以直接使用参数,不需要通过prop.的方式 -->
<div class="son"> 子组件  {{ car }} - {{ money }} 
<button>花钱</button>
</div>
</template>

<script setup>
const prop = defineProps({
    money:Number,
    car:String
})
const emit = defineEmits(['sub'])
// 在js中需要prop.的方式来使用参数
console.log(prop.car)

</script>
<style scoped>
.son {
    border:1px solid #000;
    padding: 30px;
}
</style>

③.说明

在父组件中，导入子组件可以直接进行使用。

在父组件中，需要在子组件上以属性的方式进行参数传递，可以传递固定值或者动态值。

在父组件中，改变了给子组件传递的值，子组件会实时接收到最新的值，并更新视图。

在子组件中，通过defineProps来接收父组件传递的参数，参数id和父组件中子组件上的属性一致。

在子组件中，模板中可以直接使用参数，在js中要通过对象.属性的方式进行使用。

2.子传父（子调用父的方法）

①步骤

在父组件中给子组件标签通过@方式绑定自定义事件

在子组件通过defineEmits编译器宏生成emit方法

在子组件中触发自定义事件，并传递参数

②示例

父组件：

<script setup>
// 局部组件，导入之后就可以进行使用
import chlid from '@/components/child.vue'
import { ref } from 'vue';
const money = ref(50);
const add = () =>{
  money.value += 10;
}

const subs = (val) =>{
money.value = val;
}
</script>

<template>
  <div>
    <h3>父组件 {{ money }}
      <!-- 在父组件中改变了往子组件传递的值，子组件会接收到最新的值，并更新视图 -->
    <button @click="add"> 挣钱</button>
  </h3>
  <!-- 给子组件，以添加属性的方式进行传递，可以传递固定值或者动态值-->
    <chlid car = "BYD" :money = "money" @sub="subs"></chlid>
  </div>
</template>

子组件：

<template>
<!-- 在模板中可以直接使用参数,不需要通过prop.的方式 -->
<div class="son"> 子组件  {{ car }} - {{ money }} 
<button @click="send">花钱</button>
</div>
</template>

<script setup>
const prop = defineProps({
    money:Number,
    car:String
})
const emit = defineEmits(['sub'])
// 在js中需要prop.的方式来使用参数
console.log(prop.car)

const send = () =>{
    emit("sub",5);
}

</script>
<style scoped>
.son {
    border:1px solid #000;
    padding: 30px;
}
</style>

③说明

父组件中的自定义事件名和子组件中defineEmits数组中的时间名和emit方法中的事件名，这三个事件名必须保持一致。

3.父调用子的方法

①步骤

默认情况下载<script setup>语法糖下组件内部的属性和方法时不开放给父组件访问的，

可以通过defineExpose编译宏指定哪些属性和方法允许访问。

②示例

父组件：

<script setup>
// 局部组件，导入之后就可以进行使用
import chlid from '@/components/child.vue'
import { ref } from 'vue';
const name = ref('xiaolin');
const updateName = () => {
  name.value = 'xiaoli';
}
const money = ref(50);
const add = () =>{
  money.value += 10;
}

const subs = (val) =>{
money.value = val;
}

// 定义子组件ref对象，调用子组件的方法及属性
const childRef = ref(null);
const gerChild = () =>{
  console.log(childRef.value);
  console.log(childRef.value.info);
  childRef.value.fun1('123');
}
</script>

<template>
  <div>
    <h3>父组件 {{ money }}
      <!-- 在父组件中改变了往子组件传递的值，子组件会接收到最新的值，并更新视图 -->
    <button @click="add"> 挣钱</button>
  </h3>
  <!-- 给子组件，以添加属性的方式进行传递，可以传递固定值或者动态值-->
    <chlid ref="childRef" car = "BYD" :money = "money" @sub="subs"></chlid>
    <button @click="gerChild">获取子组件</button>
  </div>
</template>

子组件：

<template>
<!-- 在模板中可以直接使用参数,不需要通过prop.的方式 -->
<div class="son"> 子组件  {{ car }} - {{ money }} 
<button @click="send">花钱</button>
<input ref="inputRef"/>
</div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
const prop = defineProps({
    money:Number,
    car:String
})
const emit = defineEmits(['sub'])
// 在js中需要prop.的方式来使用参数
console.log(prop.car)

const send = () =>{
    emit("sub",5);
}
// 模板引用
// 1.通过调用ref函数生成一个ref对象
// 2.通过ref标识进行绑定
// 通过ref对象的.value属性就能获取到绑定元素或组件的方法及属性（必须渲染完成之后才能获取）
const inputRef = ref(null);
onMounted(()=>{
    console.log(inputRef.value);
    inputRef.value.focus();
})

// 下面的属性和方法要想被父组件访问，需要defineExpose宏函数指定要访问的属性和方法
const  info = 1234556;
const fun1 = (val) =>{
    console.log("调用到了子组件的方法",val);
}
defineExpose({
    info,fun1
})
</script>
<style scoped>
.son {
    border:1px solid #000;
    padding: 30px;
}
</style>

③说明

通过defineExpose显示暴露子组件内部的属性和方法。

在父组件中通过ref函数获取到子组件的实例，然后通过.value来调用子组件的属性及方法。

4.顶层给底层传参，底层调用顶层的方法

①步骤

顶层组件通过provide函数提供数据

底层组件通过inject函数获取数据

传递参数，一般传递响应式变量

传递方法，方法中可以接收参数 

②示例

顶层组件

<script setup>
// 局部组件，导入之后就可以进行使用
import chlid from '@/components/child.vue'
import { provide, ref } from 'vue';
const name = ref('xiaolin');
const updateName = () => {
  name.value = 'xiaoli';
}
const money = ref(50);
const add = () =>{
  money.value += 10;
}

const subs = (val) =>{
money.value = val;
}

// 定义子组件ref对象，调用子组件的方法及属性
const childRef = ref(null);
const gerChild = () =>{
  console.log(childRef.value);
  console.log(childRef.value.info);
  childRef.value.fun1('123');
}
// 顶层组件给底层组件传递参数
// 在顶层组件通过provie向底层组件传递参数,数据是响应式的，在顶层组件中修改了传递给底层组件的参数，底层组件会接收到最新的值。
const title= ref("主题1");
provide("title",title);
const updateBottom = () =>{
  title.value = "主题修改了";
}
// 顶层组件给底层组件传递方法
provide('updateTitile', (newVal) =>{
  title.value = '主题修改为' + newVal;
})
</script>

<template>
  <div>
    <h1>父组件 {{ money }}
      <!-- 在父组件中改变了往子组件传递的值，子组件会接收到最新的值，并更新视图 -->
    <button @click="add"> 挣钱</button>
  </h1>
  <!-- 给子组件，以添加属性的方式进行传递，可以传递固定值或者动态值-->
    <chlid ref="childRef" car = "BYD" :money = "money" @sub="subs"></chlid>
    <button @click="gerChild">获取子组件</button>
    <!-- 修改向底层组件传递的内容 -->
    <button @click="updateBottom"> 修改向底层组件传递的内容</button>
  </div>
</template>

中间组件

<template>
<!-- 在模板中可以直接使用参数,不需要通过prop.的方式 -->
<div class="son">
     <h2>子组件  {{ car }} - {{ money }} </h2>
<button @click="send">花钱</button>
<input ref="inputRef"/>
<bottom></bottom>
</div>

</template>

<script setup>
import { ref,onMounted } from 'vue';
import bottom from './bottom.vue';
const prop = defineProps({
    money:Number,
    car:String
})
const emit = defineEmits(['sub'])
// 在js中需要prop.的方式来使用参数
console.log(prop.car)

const send = () =>{
    emit("sub",5);
}
// 模板引用
// 1.通过调用ref函数生成一个ref对象
// 2.通过ref标识进行绑定
// 通过ref对象的.value属性就能获取到绑定元素或组件的方法及属性（必须渲染完成之后才能获取）
const inputRef = ref(null);
onMounted(()=>{
    console.log(inputRef.value);
    inputRef.value.focus();
})

// 下面的属性和方法要想被父组件访问，需要defineExpose宏函数指定要访问的属性和方法
const  info = 1234556;
const fun1 = (val) =>{
    console.log("调用到了子组件的方法",val);
}
defineExpose({
    info,fun1
})
</script>
<style scoped>
.son {
    border:1px solid #000;
    padding: 30px;
}
</style>

底层组件

<template>
<div> 
    <h3>我是底层组件 - {{ title }}</h3>
    <button @click="update">调用顶层组件的方法</button>
</div>
</template>

<script setup>
import { inject } from 'vue';

// 底层组件通过inject接收顶层组件的参数
const title = inject('title');

// 底层组件通过inject接收顶层组件的方法
const updateTitile = inject('updateTitile');

const update = () =>{
    updateTitile('底层调用顶层');
}

</script>

③说明

通过provide及inject实现顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信。如果不使用这种方式，只能一级级组件进行通信，或者使用全局状态管理（如pinia）。

在顶层组件中通过provide提供响应式变量及方法，在底层组件中铜鼓inject可以进行调用。

5.模板引用

①步骤

调用ref函数生成一个ref对象。

通过ref标识绑定ref对象到标签中。

②示例

<template>
<!-- 在模板中可以直接使用参数,不需要通过prop.的方式 -->
<div class="son"> 子组件  {{ car }} - {{ money }} 
<button @click="send">花钱</button>
<input ref="inputRef"/>
</div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
const prop = defineProps({
    money:Number,
    car:String
})
const emit = defineEmits(['sub'])
// 在js中需要prop.的方式来使用参数
console.log(prop.car)

const send = () =>{
    emit("sub",5);
}
// 模板引用
// 1.通过调用ref函数生成一个ref对象
// 2.通过ref标识进行绑定
// 通过ref对象的.value属性就能获取到绑定元素或组件的方法及属性（必须渲染完成之后才能获取）
const inputRef = ref(null);
onMounted(()=>{
    console.log(inputRef.value);
    inputRef.value.focus();
})

const  info = 1234556;
const fun1 = () =>{
    console.log("调用到了子组件的方法");
}
</script>
<style scoped>
.son {
    border:1px solid #000;
    padding: 30px;
}
</style>

上面示例实现了画面加载后焦点放在输入框上。 

③说明

通过ref标识获取真实的dom对象或者组件对象实例，这就就通过dom对象或者组件实例来调用方法和属性。常见的示例如下：

获取form表单的dom对象，调用validate()进行校验处理。

获取imput输入框的dom对象，调用focus()，将焦点放在输入框上。

获取子组件的对象实例，调用子组件的方法或者获取子组件的属性。

注意：通过ref方式获取dom对象有一个前提，必须是页面渲染完成之后才能获取到，最早在onmounted中可以获取到。

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

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

相关文章

国内厉害的游戏开发公司有哪些?

国内厉害的游戏开发公司有哪些?

中懿游游戏软件开发,中国有许多厉害的游戏开发公司&#xff0c;其中一些在国际上也享有盛誉。以下是一些在中国游戏开发领域中备受关注的公司&#xff1a; 腾讯游戏&#xff08;Tencent Games&#xff09;&#xff1a; 作为中国最大的互联网公司之一&#xff0c;腾讯的游戏分支…
阅读更多...
【鸿蒙应用ArkTS开发系列】- 沉浸式状态栏实现

【鸿蒙应用ArkTS开发系列】- 沉浸式状态栏实现

文章目录 一、前言二、封装沉浸式状态栏管理类1、创建Demo工程2、封装状态栏管理类 三、编写页面实现沉浸式状态栏效果1、存储windowStage实例2、Page页面中实现沉浸式开启关闭功能2.1、开启沉浸式状态栏2.2、设置标题栏偏移量 一、前言 在应用开发中&#xff0c;页面跟状态栏…
阅读更多...
算法练习Day20 （Leetcode/Python-回溯算法）

算法练习Day20 （Leetcode/Python-回溯算法）

虽然看似进入了一个新章节&#xff0c;但其实还是前几天二叉树章节的延续。。 回溯算法 &#xff08;以下内容摘抄自代码随想录&#xff09;&#xff1a; 回溯法解决的问题都可以抽象为树形结构&#xff0c;是的&#xff0c;我指的是所有回溯法的问题都可以抽象为树形结构&…
阅读更多...
etcd-workbench一款免费好用的ETCD客户端，支持SSHTunnel、版本对比等功能

etcd-workbench一款免费好用的ETCD客户端，支持SSHTunnel、版本对比等功能

介绍 今天推荐一款完全免费的ETCD客户端&#xff0c;可以私有化部署: etcd-workbench 开源地址&#xff1a;https://github.com/tzfun/etcd-workbench Gitee地址&#xff1a;https://gitee.com/tzfun/etcd-workbench 下载 本地运行 从 官方Release 下载最新版的 jar 包&am…
阅读更多...
详谈 springboot整合shiro

详谈 springboot整合shiro

背景&#xff1a; 本章将进一步的落地实践学习&#xff0c;在springboot中如何去整合shrio&#xff0c;整个过程步骤有个清晰的了解。 利用Shiro进行登录认证主要步骤&#xff1a; 1. 添加依赖&#xff1a;首先&#xff0c;在pom.xml文件中添加Spring Boot和Shiro的相关依赖…
阅读更多...
Unprocessing Images for Learned Raw Denoising

Unprocessing Images for Learned Raw Denoising

原文 RWA Image Dataset&#xff1a;the Darmstadt Noise Dataset Abstract 1、Introduction 1、传统图像去噪方法&#xff1a;分析图像属性、对噪声建模&#xff08;传统方法好像总是这样&#xff0c;建立模型然后用数学方法贴近模型&#xff09; TBD&#xff1a;找传统的…
阅读更多...
开源自托管导航页配置服务Dashy本地搭建结合内网穿透远程访问

开源自托管导航页配置服务Dashy本地搭建结合内网穿透远程访问

开源自托管导航页配置服务Dashy本地搭建结合内网穿透远程访问 简介1. 安装Dashy2. 安装cpolar3.配置公网访问地址4. 固定域名访问 简介 Dashy 是一个开源的自托管的导航页配置服务&#xff0c;具有易于使用的可视化编辑器、状态检查、小工具和主题等功能。你可以将自己常用的一…
阅读更多...
网络编程--socket编程

网络编程--socket编程

这里写目录标题 套接字概念通信原理总结 预备知识网络字节序简介字节转换函数 IP地址转换函数为什么单独列出函数原型sockaddr结构体 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 套接字 概念 Socket本身有插座的意思&#xff0c;但他是进程之间网络通…
阅读更多...
如何分析 JVM 内存瓶颈浅谈

如何分析 JVM 内存瓶颈浅谈

背景&#xff1a; 当操作系统内存出现瓶颈时&#xff0c;我们便会重点排查那个应用占用内存过大。对于更深一步分析内存的使用&#xff0c;就进一步去了解内存结构&#xff0c;应用程序使用情况&#xff0c;以及内存如何分配、如何回收&#xff0c;这样你才能更好地确定内存的…
阅读更多...
62.乐理基础-打拍子-二八

62.乐理基础-打拍子-二八

前置知识&#xff1a;61.乐理基础-打拍子-休止符打法-CSDN博客 通过前置知识&#xff0c;知道了四分音符、二分音符、附点二分音符、全音符以及它们各自对应的休止符拍子的打法&#xff0c;如下图&#xff0c;它们都是最简单的&#xff0c;因为它们都是一拍的整数倍&#xff0…
阅读更多...
竞赛保研 基于YOLO实现的口罩佩戴检测 - python opemcv 深度学习

竞赛保研 基于YOLO实现的口罩佩戴检测 - python opemcv 深度学习

文章目录 0 前言1 课题介绍2 算法原理2.1 算法简介2.2 网络架构 3 关键代码4 数据集4.1 安装4.2 打开4.3 选择yolo标注格式4.4 打标签4.5 保存 5 训练6 实现效果6.1 pyqt实现简单GUI6.3 视频识别效果6.4 摄像头实时识别 7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xf…
阅读更多...
山海鲸开发者视角：帮助汽车制造商取得市场优势

山海鲸开发者视角：帮助汽车制造商取得市场优势

山海鲸可视化是一款致力于数字孪生领域的产品&#xff0c;为各行各业提供专业的数据可视化解决方案。作为山海鲸开发者&#xff0c;我们在开发免费好用的数字孪生工具同时也希望能让大家通过多种解决方案了解我们软件的多种可能性&#xff0c;本文就为大家介绍我们的汽车行业解…
阅读更多...
JUC并发编程 09——队列同步器AQS

JUC并发编程 09——队列同步器AQS

目录 一.Lock接口 1.1Lock的使用 1.2Lock接口提供的 synchronized 不具备的主要特性 1.3Lock接口的所有方法 二.队列同步器(AQS) 2.1队列同步器的接口与示例 2.2AQS实现源码分析 ①同步队列 ②获取锁 ③释放锁 一.Lock接口 说起锁&#xff0c;你肯定会想到 synchron…
阅读更多...
MY FILE SERVER: 1

MY FILE SERVER: 1

下载地址 https://download.vulnhub.com/myfileserver/My_file_server_1.ova 首先我们需要发现ip 我的kali是59.162所以167就是靶机的 然后我们拿nmap扫一下端口 nmap -sV -p- 192.168.59.167 扫完发现有七个端口开放 按照习惯先看80 没看到有啥有用信息,用nikto扫一下 nik…
阅读更多...
中文论文修改和润色哪个好写 papergpt

中文论文修改和润色哪个好写 papergpt

大家好&#xff0c;今天来聊聊中文论文修改和润色哪个好写&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff0c;可以借助此类工具&#xff1a; 标题&#xff1a;中文论文修改与润色&#xff1a;哪个更容易写&…
阅读更多...
家校互通小程序实战开发01需求分析

家校互通小程序实战开发01需求分析

目录 1 角色的划分2 用例分析3 创建业务数据源4 创建登录用户数据源总结 最近几年&#xff0c;随着移动互联网的深入发展&#xff0c;我们的日常生活和工作和微信已经紧密绑定。其实&#xff0c;有时候生活和工作的界限已经不明显&#xff0c;在我们的微信好友里既有家人、朋友…
阅读更多...
助力打造清洁环境，基于美团最新YOLOv6-4.0开发构建公共场景下垃圾堆放垃圾桶溢出检测识别系统

助力打造清洁环境，基于美团最新YOLOv6-4.0开发构建公共场景下垃圾堆放垃圾桶溢出检测识别系统

公共社区环境生活垃圾基本上是我们每个人每天几乎都无法避免的一个问题&#xff0c;公共环境下垃圾投放点都会有固定的值班时间&#xff0c;但是考虑到实际扔垃圾的无规律性&#xff0c;往往会出现在无人值守的时段内垃圾堆放垃圾桶溢出等问题&#xff0c;有些容易扩散的垃圾比…
阅读更多...
VMware vcenter6.7安装（基于windows客户端）

VMware vcenter6.7安装（基于windows客户端）

一、下载vcenter6.7 1.下载地址&#xff0c;直接复制粘贴到web回车即可&#xff0c;这一步就不截图了。 从官网或者百旺网盘&#xff08;可以自行搜索&#xff0c;或者私信我要&#xff09; 二、安装部署vcenter6.7 将下载好的镜像文件拷贝到一台Windows机器上&#xff0c;…
阅读更多...
docker-compose 安装Sonar并集成gitlab

docker-compose 安装Sonar并集成gitlab

文章目录 1. 前置条件2. 编写docker-compose-sonar.yml文件3. 集成 gitlab4. Sonar Login with GitLab 1. 前置条件 安装docker-compose 安装docker 创建容器运行的特有网络 创建挂载目录 2. 编写docker-compose-sonar.yml文件 version: "3" services:sonar-postgre…
阅读更多...
智能优化算法应用：基于法医调查算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于法医调查算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于法医调查算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于法医调查算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.法医调查算法4.实验参数设定5.算法结果6.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023