vue3组件传值---vue组件通过属性,事件和provide,inject进行传值

本文主要是介绍vue3组件传值---vue组件通过属性,事件和provide,inject进行传值,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

通过属性传值(父传子)

        vue的组件具有props自建属性(自定义名称,类似于class,id的属性),通过这个属性,父组件可以向子组件传递参数,从而实现组件之间的信息传递,

在子组件(myComponent.vue)中设置

<script setup>//组合式API//自建属性 父组件给子组件传值
const props = defineProps({title : String,num : Number
});
console.log(props.title,props.num);
</script>

这里设置了两个属性,一个title字符串值,一个num数字值,

在父组件(App.vue)中


<script setup>
import myComponent from './components/myCompenent.vue'
import { ref } from 'vue';
const num = ref(0);
</script><template><myComponent  title="我的组件" :num= 'num'/>
</template>

注意num应该使用模板语法(v-bind:num或:num),否则num无法被识别为数字,而是默认为字符串

然后启动项目,可以在控制台上看到传递的参数

通过事件传值(子传父)

vue组件可以自建事件,由父组件监听,并接受参数,通过这个参数,父组件可以收到来自子组件的信息

在子组件(myComponent.vue)中设置

<script setup>//组合式API
import { ref } from 'vue';
// 响应式状态
const count = ref(0);//自建事件 子组件向父组件传值
const emit = defineEmits(["changeNum"])function add(){count.value++;emit("changeNum",count.value);//触发changeNum事件,传递count.value
}
</script><template><button @click="add">count={{ count }}</button><!-- 这里的count自动被浅层解包 即count=count.value -->
</template>

在父组件(App.vue)中

<script setup>
import { ref } from 'vue';
import myComponent from './components/myCompenent.vue'const num = ref(0);
function changeNum(count) {console.log("子组件传递的值:",count);
}</script><template><myComponent  title="我的组件" :num= 'num' @changeNum="changeNum" /></template>

        事件流程:每点击一次子组件中的按钮执行add函数,add函数会触发事件changeNum,使count自增,并传递出这个count,父组件中监听到事件changeNum,执行changeNum函数并接受子组件传递的值打印在控制台上

这样我们就完成了子组件向父组件传值

provide,inject传值(父传子)

vue3中新增了provide和inject方法,在上面两种方法中,只能在相邻的组件中传递信息,例如,A->B->C,A和C想要传递信息,就必须要通过B,而使用provide,inject传值的方式可以跳过B直接进行传递,不过这种方式只能由父组件传递给子组件

在子组件中(newComponent.vue)

<script setup>//组合式API
import { inject } from 'vue';
const msg = inject("msg");//接受信息</script><template><p>{{ msg }}</p></template>

在父组件中 (App.vue)

<script setup>import newComponent from './components/newComponent.vue'import { ref,provide } from 'vue';const msg = provide("msg","向子组件传递的信息");//只能有父组件向子组件传</script><template><newComponent/><template>

provide(key,value),有两个参数,一个是传递值的key(字符串),另一个是value(任意值)

inject(key),有一个参数,接收值的key(字符串)

它们都只能在setup函数或setup的script标签中使用,返回值都是响应式类型

关于响应式可以参考:

vue响应式API,ref和reactive的使用-CSDN博客

这篇关于vue3组件传值---vue组件通过属性,事件和provide,inject进行传值的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1023195

相关文章

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Python使用自带的base64库进行base64编码和解码

《Python使用自带的base64库进行base64编码和解码》在Python中,处理数据的编码和解码是数据传输和存储中非常普遍的需求,其中,Base64是一种常用的编码方案,本文我将详细介绍如何使... 目录引言使用python的base64库进行编码和解码编码函数解码函数Base64编码的应用场景注意

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》:本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点:switch中的生成我们的label事件接着,

Java进行文件格式校验的方案详解

《Java进行文件格式校验的方案详解》这篇文章主要为大家详细介绍了Java中进行文件格式校验的相关方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、背景异常现象原因排查用户的无心之过二、解决方案Magandroidic Number判断主流检测库对比Tika的使用区分zip

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Python使用date模块进行日期处理的终极指南

《Python使用date模块进行日期处理的终极指南》在处理与时间相关的数据时,Python的date模块是开发者最趁手的工具之一,本文将用通俗的语言,结合真实案例,带您掌握date模块的六大核心功能... 目录引言一、date模块的核心功能1.1 日期表示1.2 日期计算1.3 日期比较二、六大常用方法详

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali