vue子向父传值
2024-08-30 14:07:22
要弄懂子组件如何向父组件传值,需要理清步骤
子组件向父组件传值的步骤
一:子组件在组件标签上通过绑定事件的方式向父组件发射数据
<!--html-->
<template id="ccp">
<div>
<button v-for='item of options' @click = 'sonclick(item)'>
{{item.name}}
</button>
</div>
</template>
// 子组件的methods项目下
sonclick(item) {
console.log('我向父组件发射了一个事件', item.name);
this.$emit('getson', item) // 子组件向发射事件,
//参数1:规定必须父组件使用的事件类型,
// 参数2: 向父组件发射的数据 }
说明:
1:在子组件上绑定事件,在子组件的methods上定义这个函数
2:在这个函数内部使用 this.$emit方法用于向父组件发射数据
3: 参数1:要求父组件自定义的事件;参数2:要向父组件发射的数据内容
二:父组件接收子组件发射的数据
<!-- vue实例下 -->
<div id="app">
<cpn @getson='times'></cpn>
</div>
父组件使用v-on + 子组件的规定的事件名绑定一个函数来操作从子组件传递过来的数据 @getSonFnName = ''xxx''
// vue实例的methods下
times(item) {
console.log(item.id)
}
说明:
1:父组件通过子组件规定的事件名来创建一个函数,并接收子组件传递的数据
2:在父组件定义的函数内部可以处理子组件的数据
3:由于子组件没有浏览器对象,所以定义函数时不用加参数,默认就是子组件传递的数据
4:v-on用于在父组件绑定子组件规定的事件类型,因而v-on也可以绑定自定义事件
这样,就理解了vue子组件向父组件传值的过程。
以上。
最新文章
- 将网站添加到iPhone的主屏幕上
- 打印机设置(PrintDialog)、页面设置(PageSetupDialog) 及 RDLC报表如何选择指定打印机
- Vim实现批量注释的方法
- js----深入理解闭包
- Android——将图片加入到系统相册里面
- STL set_difference set_intersection set_union 操作
- QT窗口拖拽功能简单应用(处理dragEnterEvent和dropEvent事件,不同的事件有不同的信息,比如mimeData)
- C语言之三目运算符
- EF CodeFirst使用MySql
- Android Studio 问题
- 9.并发_EJ
- maven plugins
- java锁的简化
- CentOS 下的邮件通知
- NetBpm 配置篇(2)
- MySQLdb &; pymsql
- sidecar学习
- E题:Water Problem(快速幂模板)
- 《Apache Velocity用户指南》官方文档
- Java基础随笔3
热门文章
- 客户端进行定位(无地图API)
- 【转】ArcGIS 10.1 for Server 架构
- 一些常用查询SQL语句以及显示格式
- 解决el-tree lazy懒加载时,连续勾选前两个子节点后第二次进入默认选中时,将父节点也勾选的问题
- 曹工说Spring Boot源码(12)-- Spring解析xml文件,到底从中得到了什么(context:component-scan完整解析)
- Linux 编程题
- Elasticsearch:是什么?你为什么需要他?
- 高通量计算框架HTCondor(四)——案例准备
- elasticsearch为什么比mysql快
- [mvc>;actionResult] 封装一个操作方法的结果并用于代表该操作方法执行框架级操作