Vue this.$emit 子组件向父组件传递

2024-05-13 14:32:48

子组件向父组件传递数值

在父组件进行调用子组件需要使用 v-model 进行绑定接收数据的变量,示例代码如下

理解为自定义组件命名为 swiper 绑定父组件在data里面声明命名为 currIndex 变量

<swiper v-model="currIndex"></swiper>

子组件若想修改 currIndex 变量内容需要使用 this.$emit('index',数值内容) 示例代码如下

理解为修改 currIndex 为数值 1

 this.$emit('input', 1);

子组件接收数据

子组件若向接收父组件使用 v-model 标签掉落的数据必须使用命名为 value 的变量名称才能接收到数据!

type 为接收的数据类型为什么

default 为接收数据的默认值

若接收的为数字类型数据则将 type 修改为Number default 修改为 0或其他数字

props: {value: {type: Boolean,default: false}
},

子组件向父组件调用函数

在父组件进行调用子组件需要使用 v-on 进行绑定接收数据的变量,示例代码如下

理解为自定义组件命名为 swiper 绑定父组件在methods里面声明命名为 myfun 函数

<swiper v-on:myFun="myFun"></swiper>

子组件若想调用父组件的 myFun 函数需要使用 this.$emit('函数名称',参数,..) 示例代码如下

理解为调用 myFun 并传递参数 1

 this.$emit('myFun', 1);

Vue this.$emit 子组件向父组件传递相关推荐

Vue子组件调用父组件方法并传参的5种方式：$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
如需了解老子怎么控制儿子的,传送门:https://s-z-q.blog.csdn.net/article/details/119922715 子组件child.vue <template> ...
Vue子组件向父组件传值（this.$emit()方法）
子组件使用this.$emit()向父组件传值首先必须在父组件中引用子组件,然后实现传值第一步在父组件中引入子组件使用import引入组件 import indexImportOrder fr ...
Vue.js子组件向父组件通信
一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的 ...
vue父组件使用子组件函数，vue子组件使用父组件函数
(1)vue中父组件调用子组件函数用法: 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法详解: ...
vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例模仿v-model实现案例我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例这是父组件的东西.利用这个框改变值,看看有没 ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
vue 子组件给父组件传值
vue通信之子组件给父组件传值子组件给父组件传值背景一般是子组件中某一事件之后,得到的某一状态或者是值,想要通知父组件改变. 通过自定义事件传值. 子组件: <Button type=&quo ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...

最新文章

热门文章