Vue组件之详细理解并使用props和$emit()

最新推荐文章于 2024-06-18 09:00:43 发布
最新推荐文章于 2024-06-18 09:00:43 发布
阅读量2.8k 收藏 9
点赞数 6
分类专栏： Vue 文章标签： vue props & emit
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunday97/article/details/91356575
版权
本文详细介绍了Vue中props的使用，强调了props是子组件接收父组件数据的方式，需在子组件中声明，并在父组件中绑定。同时也解释了为何不能直接在子组件中修改props的值。接着，文章探讨了$emit()的作用，说明了子组件如何通过$emit触发父组件的自定义事件来实现数据的单向传递，并提供了实例代码和演示效果。
摘要由CSDN通过智能技术生成

一、props的使用

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”。
个人理解是：props是在子组件里面写的，其值为一个数组，即props:[keyName]。其中的keyName是要传递的参数，但它是如何绑定到父组件的数据呢？在父组件里面用到子组件的时候，就在父组件文件中的子组件标签里面进行绑定keyName,然后keyName的值就是要绑定的父组件的数据。子组件里面要用到父组件数据时就直接用keyName就行。
实例如下：

下面画蓝线的就表示是props里面的属性参数名，画红线的就是父组件的数据。可以清晰的看到父组件的数据firstName只在父组件里面出现，在父组件里面传递给parentData,然后子组件里面就只需用到parentData就行了，就不用出现firstName。因为parentData代表的就是firstName
在这里插入图片描述
在这里插入图片描述
效果图如下：用了v-model动态的改变firstName的值然后传递到子组件中
在这里插入图片描述
仔细看可以发现上面是动态的改变子组件里面的props的值parentData,

最低0.47元/天 解锁文章
子月吾生
关注
专栏目录
初识Vue-组件通信（详解props和emit）
百赢出品，必属精品
05-04 1466
在组件化开发中，一个应用程序通常由多个组件组成。这些组件可能位于不同的层级，有不同的作用和责任。组件通信就是让这些组件之间能够相互交流、传递数据、共享状态或触发行为的机制。Props 允许父组件向子组件传递数据。子组件通过 props 接收父组件传递的数据，并可以在组件内部使用这些数据。父组件使用 v-bind 指令将数据传递给子组件，并在子组件标签上使用相应的 prop 名称。Custom Events 允许子组件向父组件发送消息。
vue3中props以及emit实现原理
weixin_42373116的博客
05-17 1242
前言 本文章属个人源码分析笔记，描述不周之处，多多海涵。废不多说，马上开始吧 这里简单描述下实现原理： 代码<MyComponent @clicked = () => alert('111')></MyComponent>中 会解析出参数props: {onClicked: () => alert('111')} 当调用emit的时候，会从实例中获取props参数。寻找onClicked参数，然后执行 一句话：执行的方法会挂载到实例的props上，在props上寻找
Vue3组件通信全解析：利用props、emit、provide/inject跨层级传递数据，expose与ref实现父子组件方法调用
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-18 7068
template>--子组件eventsSetup.vue 定义事件演示-->//定义一个点击完成事件 done 和 sent 两个事件//TS模式 定义emits/*}>();*///触发done事件，请把用户输入的值msg传出去//也可以不传参数.itxst{
vue中父子组件传值问题 通过props 和 $emit()方法
weixin_30436101的博客
08-30 410
（代码在最后） 1、父组件给子组件传值直接通过props,听着很简单，但是对于初学者来说还是比较难以理解的，今天小白通过自己的实践操作结合代码分析一下 案例 把模态框单独的抽离出来，当作一个组件 第一步：首先写好一个模态框 （我直接用的是element-ui中的dialog弹出框） 当作子组件 第二步：在父组件中引入 引入的时候注意一下自己的路径就可以了，这两步应该很容易...
vue 之prop与$emit的用法
qq_33779502的博客
08-19 3022
1、vue组件Prop传递数据：  组件实例的作用域是孤立的，这意味着不能在子组件的模板内直接引父组件的数据，如果要让子组件使用父组件的数据，则需要通过子组件的prop选项；prop是单向绑定的，当父组件的属性变化时，将传递给子组件，但是反过来不行；这样主要是防止子组件无意修改父组件的状态；每次父组件更新时，子组件的所有prop都会更新为最新值。这意味着你不能在子组件内部改变prop。 2、子...
vue组件通信---父子互传（props，$emit()）
muzidigbig的博客
11-20 3676
一、大纲 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。 第一步：父传子（props） 第二步：子传父（$emit()） 二、案例 1----props 2----$emit() parent.vue <te...
vue之父子组件间通信实例讲解(props、$ref、$emit)
01-19
这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。 在说如何实现通信之前，我们先来建两个组件father.vue和child.vue作为示例的基础。 //父组件 我是父组件！ <child></...
10.（vue3.x+vite）组件间通信方式之props与$emit.rar
09-19
在这个“10.（vue3.x+vite）组件间通信方式之props与$emit.rar”压缩包中，我们主要探讨的是使用Vue3.x的props和$emit进行组件间的通信。 首先，让我们深入了解props。Props是用来将数据从父组件传递给子组件的一种...
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式。 父组件传值给子组件 在 Vue 中，父组件可以通过 props 将数据传递给子组件。例如： // 父组件：parent.vue ...
60Vue - Props（Prop 验证）
阿甘兄
07-29 967
组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。 prop 是一个对象而不是字符串数组时，它包含验证要求： Vue.component('example', { props: { // 基础类型检测 （`null` 意思是任何类型都可以） propA: Number, // 多种类型 propB: [S...
vue2.X 组件通信（$emit $on props）
wandoumm的博客
05-15 562
1.index.html  子组件直接修改父组件的数据组件通讯：　　vm.$emit();　　vm.$on();父组件和子组件：子组件想要拿到父组件数据：　　通过 props　　之前,子组件可以更改父组件信息,可以是同步 sync　　现在,不允许直接给父级的数据,做赋值操作123456789101112131415161718192021222324252627282930313233343536...
Vue的父子组件传值：props属性和emit的使用（绝对实用）
Ginny_2019的博客
08-16 772
Props属性 类型：Array<string> | Object 作用： 用于接收来自父组件的数据，它具有基于Array的简单语法和替代的基于对象的语法，允许高级配置，如类型检查，自定义验证和默认值。 type：可以是下列构造函数之一：String，Number，Boolean，Array，Object，Date，Function，Symbol，任何定制构造函数或...
组件交互（props,emit,$attrs,$listeners）
于景波的技术博客
08-10 348
全局组件和局部组件 开发的优点 方便协作 方便维护 复用 （数据是根据传入的数据展示） 全局组件和局部组件： 注意：命名 需要使用双标签 父传子传孙（父传子），只能一级一级的传，不能跨级传： 传递时，进行属性校验： 方法传递（子触发父中的方法）： 请问，如下代码点击执行吗？ 答：不执行。它为它是组件上的属性，就不是我们常见的点...
vue.js --prop、prop的验证和prop的注意事项
lyx9611的博客
06-18 1407
1、prop的验证（我就直接从官网复制了） 有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定 HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名 1、以数组的形式 prop:['name','age']; 2、以对象的形式 prop:{ name:{ type:String,
vue组件通信。prop，ref,emit的用法与区别
笑到世界都狼狈的博客
08-01 2085
文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 相信对于很多vue初学者来说，看到组件通信这块的时候，跟我一样懵逼，完全摸不清啥是啥，搞到最后，连父子组件都区分不清了。 下面这篇文章就是我对vue父子组件通信的研究，写的比较啰嗦，但是，对于一个初学者来说，不啰嗦一点，下次忘记了在看，可能又看不懂了。 一、prop、ref、emit的区别 我这边对以上三点的区别做一些我...
vue中父向子传值prop和props的区别
weixin_44569565的博客
03-31 363
我以为是多加了一个s的原因，反正去掉就不报错了，可以正常传值。结果在别的子组件再次使用prop时，父组件的值传不过来一直是undefined，一层层找才发现是prop书写的原因，我加上s又可以传值了。总结：如果子组件里与父组件传递过来的值名称重复（但是应该避免这种情况，最好不要重复），使用prop则不会报错；正常应该使用props！父向子传值时，没注意子组件里也有个tableData，于是使用”props“的时候报了一个错。数据属性“tableData”已经声明为道具。请使用prop默认值。
Vue父子组件通信的三种方式 props、@eventName、$on
搬运Gong
04-24 1620
前言 vue 开发中，免不了会用到父子组件的通信，比如调用父类组件的方法或者变量；再比如父组件调用子组件的方法；父子组件相互传递数据等，本文主要通过讲解 props 的使用，来完成父子组件之间的通信。 重点知识（props 的使用） 在父组件中，通过引入子组件，在html部分通过子组件标签进行数据传递给对应的子组件，在子组件中，通过使用 props 来接收，并处理。 我们传递的时候，数据绑定的名称尽量保持与需要传递的值保持一致，这样不容易搞混乱。 另外，如果子组件要对父组件的数据进行操作的话，需要将操作的方
全网最详细props、emit解析
Ted_az的博客
10-02 882
全网最详细props、emit解析
Vue父子组件通信实例：props、$ref与$emit详解
在Vue.js中，父子组件间的通信是开发复杂应用时的重要环节。本文将深入探讨如何利用props、$ref和$emit这三个核心概念实现这一目标。...理解并熟练运用这些机制是构建高效、可维护的Vue应用程序的关键。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值