Vue_案例_交互添加_利用子组件调用父组件的添加方法实现---vue工作笔记0023

最新推荐文章于 2024-11-30 10:30:05 发布
最新推荐文章于 2024-11-30 10:30:05 发布
阅读量335 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端UI&后端&分布式
本文为博主原创文章，未经博主 添柴程序猿 允许不得转载 违者追究法律责任。
本文链接：https://blog.youkuaiyun.com/lidew521/article/details/115490899
本文介绍了如何在Vue中通过子组件触发父组件的方法来实现数据添加。首先在子组件中定义添加事件和数据验证，然后在父组件中创建相应的添加方法并将该方法作为属性传递给子组件。通过这种方式，子组件收集到的数据能够被传递给父组件，并由父组件更新其评论列表。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前面我们通过组件编程的方法,实现了上面这个页面.

然后下面我们来实现数据的添加,要实现数据的添加,我们需要的是左边这个组件

然后我们给下面的按钮添加一个add事件进行数据提交.

然后我们给用户名,评论内容,添加上变量

然后在data的地方添加

了解本专栏 订阅专栏 解锁全文 超级会员免费看
03 子组件如何调用父组件的方法
bin_2659017380的博客
05-27 272
1、子组件无法直接修改父组件的值 2、需要子组件主动调用父组件的方法，让父组件自己去修改自己的值 child.vue <template> <div class="child"> <h5>子组件</h5> <button @click="addn">调用父组件的方法修改父组件的值</button> </div> </template> <script>
json为全局变量 vue_Vue-cli开发笔记二----------接口调用、配置全局变量
weixin_39997664的博客
01-17 309
我做的一个项目，本身是没用任何框架，纯手写的前端及数据交互，项目已经完结。最近学Vue，于是借用这个项目，改装成vue项目。(一)接口问题：使用axios的调用方法，proxyTable解决开发环境跨域，遗憾的是条件限制，只能用jsonp方法接口是jsonp解决的跨域问题。改装的时候，初期安装的axios，调用接口。安装axios，使用它的get方法，另外配置config/index.js中的pr...
子组件调用父组件方法
05-13 245
<body> <div id="app"> <button>注册</button> <button>登录</button> <com @fun="funparent"></com> //1.自定义方法: fun（在子...
子组件调用父组件的方法
weixin_45677987的博客
03-14 230
1： 子组件调用父组件的方法： // 父组件中定义关闭事件 Close() { this.addshowDialog = false; }, 2： 在子组件中调用父组件的方法： Cancel() { this.$emit('Close'); }, 使用$emit 方法： 调用父组件中的事件函数。 ...
Vue-Router基础学习笔记(小结)
10-17
Vue-Router是Vue.js官方的路由管理器，它的作用是将组件映射到特定路由上。本文主要介绍Vue-Router的基本概念、安装、基本用法以及路由的配置和高级特性。通过本文的阅读，读者能够理解并掌握Vue-Router的基本使用和...
vue学习日记19：记事本-组件版
03-26
在记事本组件中，父组件可能需要监听子组件的保存事件，以便将新笔记添加到列表中。 7. **样式隔离**：为了保持组件的独立性和可复用性，可以使用CSS模块化（如SCSS或CSS Modules）来限制组件的样式只影响自身，...
jx-ocr-Vue开发笔记
05-30
综上所述，"jx-ocr-Vue开发笔记"涵盖的内容广泛，不仅涉及到Vue.js的基本使用，还包括了OCR技术的集成、图像处理、API调用、用户交互等多个方面，是前端开发中一个综合性较强的实战项目。通过这样的项目，开发者可以...
子组件调用父组件中的方法
冷雨温喉的博客
04-28 320
父组件把方法传入子组件中，在子组件中直接调用这个方法 通过绑定属性的方法传方法名给子组件，组件通过props接收，子组件中通过this直接调用父组件中的方法 <child :parentMethod= “parentMethod”></child> prop:{ parentMethod:{ type : Function, ...
子组件调用父组件中方法的方法
weixin_63456913的博客
11-22 961
子组件调用父组件的方法
Vue 子组件调用父组件方法
qq_35957398的博客
11-05 158
第一种：通过props #父组件引用 <child :functiona="parentfunction"/> #子组件 props:{ functiona:{ type:Function, default:()=>{} } } methods:{ myfun(){ this.functiona() //调用父组件的parentfunction } } 第二种：通过$emit #父组件引用 <child...
vue 子组件调用父组件方法
逍湘子
09-28 317
子组件调用父组件方法 (1) 在子组件中直接调用父组件方法：this.$parent.parentMethod(); (2) 在子组件中通过emit触发定义在父组件中的方法：this.$eimt(‘parentMethod’, params) (3) 父组件传方法给子组件，子组件直接调用 // 父组件中绑定一个方法 <template> <div> <child :parentMethod="parentMethod"></child> &lt
Vue 子组件调用父组件的方法
qq_29236119的博客
02-02 124
Vue项目中如何在子组件中直接调用父组件的方法： 方法一： 直接在子组件中通过this.$parent.event来调用父组件中的方法 //父组件 <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { co
vue项目中 子组件调用父组件方法
最新发布
qq_25741071的博客
11-30 1149
在 Vue.js 项目中，子组件调用父组件的方法是一个常见的需求。
子组件调用父组件的方法（3种）
热门推荐
xy405580364的博客
01-02 1万+
1. 直接在子组件中通过this.$parent.event来调用父组件的方法 父组件： <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/chil...
【vue】子组件调用父组件的方法
Songywaa的博客
08-12 324
简单描述 总结子组件调用父组件的3种方法： 1、直接在子组件中通过this.$parent.event来调用父组件的方法； 2、在子组件里用$emit向父组件触发一个事件，父组件监听这个事件； 3、父组件把方法传入子组件中，在子组件里直接调用这个方法； 具体实现方法 第一种 子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> &lt...
"Vue学习笔记：父子组件通信方法总结
通过$children，父组件可以直接访问子组件中的数据和方法，实现数据共享和方法调用。然而，需要注意的是，$children返回的是一个数组，因为可以有多个子组件。 1.3 $ref $ref是Vue中一种用于父子组件通信的方式。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

添柴程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值