vue-父子组件间的传值、父组件调用子组件的方法或变量

已于 2022-05-07 10:39:31 修改
阅读量7.6k 收藏 17
点赞数 17
分类专栏： vue 文章标签： vue.js
于 2021-07-06 17:23:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y1238r/article/details/118495178
版权

一、目的

使用组件，能减轻后期维护项目的成本，更有利于维护和开发项目。

二、父组件传值给子组件

1、父子组件的写法
（1）父组件的写法
在这里插入图片描述
（2）子组件的写法
在这里插入图片描述
2、结果
在这里插入图片描述

三、子组件传值给父组件

1、父子组件的写法
（1）父组件的写法
在这里插入图片描述
（2）子组件的写法
在这里插入图片描述
2、运行结果
在这里插入图片描述

四、父组件调用子组件的方法或变量

1、父子组件的写法
（1）父组件的写法
在这里插入图片描述
（2）子组件的写法
在这里插入图片描述

2、结果
在这里插入图片描述

五、小案例

以上所有案例，我放在了vue项目里，感兴趣的小伙伴，可以下载查看源代码。如下：
1、下载地址：https://download.csdn.net/download/y1238r/20045627
2、运行结果
在这里插入图片描述

蛙夏~
关注
专栏目录
vue3【父子组件间的传值--setup语法糖】
蜗牛~~
05-15 2106
vue2.x使用的是 this.$emit 而vue3使用的是emit（因为vue3中没有this），它们的传值一样都是方法加值，即vue2.x的是。3、在子组件要触发的方法中，调用emits并传入发射给父组件的方法以及参数。this.$emit('方法名','传递的值(根据需要传或者不传)')导出，父组件才能访问到数据，否则拿不到子组件的数据。并定义要发射给父组件的方法，也可以传空。语法糖中，需要将组件的属性及方法通过。，vue3的setup语法糖的是。可以访问子组件的方法和属性，在。
VUE Element UI 父组件调用子组件方法变量，子组件使用父组件变量
ecH0o0的博客
07-23 2125
一、父组件调用子组件的方法 步骤拆解： （1）父组件：1.渲染调用子组件 2.导入子组件 3.声明子组件变量 4.调用子组件 （2）子组件：1.实现子组件自己的渲染、数据处理功能 2.使用父组件的变量 （1）父组件： 1.调用渲染子组件 <child> v-bind:user="user" //父任务的变量user，子任务使用 ref="child" :child="child" </child> 2.导入子组件,声明子组件变量 import child from "../.
Vue父组件如何获取子组件中的变量
10-16
主要为大家详细介绍了Vue父组件如何获取子组件中的变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue父组件调用子组件方法，子组件调用父组件方法
最新发布
Shining_F的博客
08-07 235
在父组件中给子组件添加一个自定义函数，把父组件中的方法传递进去。子组件通过ths.$emit来触发父组件函数。2、直接在子组件中通过“this.$parent.event”来调用父组件的方法。3、父组件把方法传入子组件中,在子组件里直接调用。
Vue3 setup语法父子组件变量方法调用
绣花针
04-18 1803
setup语法的组件是的：一个父组件无法访问到一个使用了的子组件中的任何东西，除非子组件在其中通过 defineExpose宏显式暴露。当父组件通过模板引用获取到了该组件的实例时，得到的实例类型为，和一般的实例一样)
Vue父组件获取子组件中的变量
一只前端小菜鸟
03-21 1万+
在vue项目日常开发中，难免要把功能性组件抽离出来，这样结构就会出现父子组价，兄弟组件等，但是这样就会涉及到不同组件需要互相使用其中的值得问题。 之前有说过通过ref来让父组件操作子组件，并且传值，那么我们今天来详细看看。 案例一：点击父组件的按钮，操作子组件显示 注：可以通过获取id/class来操作，这里我就不介绍这种方法了，至于jquery的话，在vue中还是慎用。 介绍：这里通过给...
vue-父组件获取子组件数据
Remind_hh的博客
09-29 1万+
父组件如何主动获取子组件上的数据？办法是通过$refs。 通过$refs我们可以在父组件上获取子组件上的数据。子组件：<div ref="dataList"></div>父组件:<child ref="whateverName"></child>在此我们就可以在父组件中 this.$refs.whateverName.dataList 就是子组件中的数据；dataList是子组件中保存了数据的名称
vue中父组件调用子组件的方法和属性
Amanda_wmy的博客
01-17 5574
vue中父组件调用子组件的方法和属性 应用场景：子组件中的方法要在父组件里面使用，例如tabs栏切换，每一个tab页面都封装成一个组件，在每个组件里面都有初始化列表这个方法，所有在tabs页面要调用这个方法 凡是要调用子组件的方法和属性都可以参考下面的实例 利用ref属性可以获取到dom元素或者是子组件，从而可以调用子组件的方法（注意2.0版本用ref取代了el 当ref直接定义在dom元素
vue3父子组件传值.doc
02-05
在父组件中，`message`属性绑定了`msg`变量，通过`@increment`监听子组件的`increment`事件，并定义了一个`handleIncrement`方法来处理这个事件。 **子组件（child.vue）**: ```html <p>{{ message }} ...
vue父子组件传值
热门推荐
upStar1的博客
03-01 2万+
记录一下项目中遇到的问题。 因为一个流程对应一种单据，所以每次点击单据详情，应该出现相应的单据内容。在另一个页面，也需要调用这个单据内容。 因为vue不能直接调用弹出框，所以老师把单据内容写成了组件，在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。（其实在本来显示单据内容的页面，只要根据后端传的内容判断显示哪个单据就可以，但是因为在另一个页面也需要调用单据内容，所以写成组件会更方便。由此，如果一个页面或者弹出框，在很多个页面需要用到，可以把这个地方的内容写成组件） ......
Vue3组件间通信——父子传值、方法调用
m0_46627407的博客
08-28 2715
Vue3组件通信之父子组件传值、方法调用
父子组件相互调用变量、方法
weixin_45629623的博客
07-23 1018
一、父组件获取子组件的变量、方法 1.调用子组件的时候 定义一个ref <rchild ref="myChild"></rchild> 2.在父组件里面通过 this.$refs.myChild.属性 this.$refs.myChild.方法（） 二、子组件获取父组件的变量、方法 直接在子组件写: this.$parent.属性 this.$parent.方法() ——————— 但是 ———————— 子组件获取父组件变量的方式是不够强大的，日常用还可。了解props是你必
vue 父组件与子组件之间的传递
hanlu66的博客
06-28 386
// 父组件&lt;Upload ref="isShowUpload" :selectedData='selectedData' @on-refresh='refresh' &gt;&lt;/Upload&gt;//方法methods(){//刷新操作 refresh(data){ this.selectedData = [];//数据选中对象 this.init(); },//上传文...
vue 父组件调用子组件数据
weixin_30878501的博客
01-23 979
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8">&...
vue嵌套子组件，父子组件之间传参，父组件调用子组件方法或变量
song_song0927的博客
05-06 2609
背景：我使用了element-ui组件库中的tabs页组件，在tab页中嵌套了子组件，即我下图中圈住的两个 组件的嵌套 注： 嵌套子组件的使用步骤： ① 在父组件中引入子组件 ②在父组件中注册子组件 ③使用子组件 建议：这三个地方的名字可以都写成一样的MaintenanceRecord，省的太乱 父子组件之间传参 父向子传参： <child :子组件内props属性接收的变量名="父组件data中声明的某个变量名"></child> 父组件内.
vue父组件变量传递子组件_vue父组件传值子组件，并初始化子组件双向绑定变量...
weixin_42357054的博客
02-22 999
父组件传值给子组件后，子组件中对值进行加工处理，进行展示，同时子组件值是表单双向绑定的值。此时可通过watch监听子组件的props值，然后对子组件变量进行初始化。尝试过用computed，双向绑定的值需要设置set。示例：parent.vueimport 'Son';export default{name: 'parent',componets:{Son},data(){return{initI...
Vue3.2 setup语法糖中如何令父组件使用子组件的方法（参数同理）
qq_48881840的博客
04-19 1110
vue3.2 父组件使用子组件的方法（参数同理）
Vue中的父子组件传值从父组件控制子组件的显示
qq_36355178的博客
03-11 5462
今天在工作遇到了一个小问题,需求是在一个vm实例中创建一个组件,是一个弹框,我使用了组件来做这个弹框.在父组件中有一个按钮点击显示子组件. 当子组件显示的时候,子组件左上角有一个× 点击可以关闭他,一开始我是这么做的: 在父组件上定义一个变量,默认为false ,然后使用v-show来控制子组件的显示和隐藏 当子组件显示的时候在子组件上定义变量,默认为true,当点击 ×的时候改变这个变量为fa...
vue父子组件传值的方法总结
qq_45337939的博客
08-17 2万+
一，父向子传值 1.通过props 使用技巧： 子组件内, props定义变量, 在子组件使用变量 父组件内, 使用子组件, 属性方式给props变量传值 注意事项： 父组件的数据发生了改变，子组件会自动跟着变 子组件不能直接修改父组件传递过来的props，会报错， props是只读的 子组件修改，不通知父级，会造成数据不一致 PS：父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新 总结: ..
vue2父组件调用子组件弹框显示隐藏
12-02
可以通过在子组件内部定义一个变量来控制弹框的显示和隐藏，然后在子组件内部定义一个show方法，父组件调用子组件的show方法，并传入对应的参数，子组件根据对应的参数，给自己组件内部的变量赋值，从而实现弹框的显示和隐藏。 以下是一个示例代码： 子组件代码： ```vue <template> <div v-show="showFlag"> <!-- 弹框内容 --> </div> </template> <script> export default { data() { return { showFlag: false // 控制弹框显示隐藏的变量 } }, methods: { show(flag) { this.showFlag = flag // 根据传入的参数设置showFlag的值 } } } </script> ``` 父组件代码： ```vue <template> <div> <button @click="showDialog(true)">显示弹框</button> <button @click="showDialog(false)">隐藏弹框</button> <child ref="child"></child> </div> </template> <script> import Child from './Child.vue' export default { components: { Child }, methods: { showDialog(flag) { this.$refs.child.show(flag) // 调用子组件的show方法，传入对应的参数 } } } </script> ``` 在父组件中，通过`$refs`获取到子组件的实例，然后调用子组件的show方法，传入对应的参数，从而实现弹框的显示和隐藏。 --相关问题--: 1. 如何在Vue中实现父子组件之间的通信？ 2. Vue中的props和emit分别
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值