vue子向父传值
要弄懂子组件如何向父组件传值,需要理清步骤
子组件向父组件传值的步骤
一:子组件在组件标签上通过绑定事件的方式向父组件发射数据
<!--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子组件向父组件传值的过程。
以上。
vue子向父传值的更多相关文章
- vue 实现子向父传值
父组件 <template> <div id="app"> <child @onChange='onChildValue'></child ...
- uniapp和vue 父向子传值、传方法及子向父传值。(一看就会超级简约)
1.父向子传值:父组件在引用子组件时通过自定义属性绑定自身需要传递的值(数据),子组件用props:[ '自定义' ]接收即可使用(props里数据是只读模式).(简约版:子绑定父的属性并用pro ...
- vue子传父、父传子
子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...
- react hooks子给父传值
子给父传值需要通过事件方法来传值,这里我们子组件是触发了一个点击事件传值: <Button onClick={()=>setshowregister(false)}>注册</B ...
- 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)
ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...
- vue子传父多个值
子组件:this.$emit("methdosName",data1,data2,data3) 父组件: <child @methodsName="xxx(argu ...
- 学以致用 ---- vue子组件→父组件通信
之前写过一篇关于 vue2.0中v-on绑定自定义事件 的随笔,但是今天实际应用的时候才发现根本就不理解,下面是实际工作中遇到的问题: [情景描述]页面中的[下拉搜索组件],因为多个页面中用到,所以抽 ...
- 深度剖析Vue中父给子、子给父、兄弟之间传值!
本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...
- vue传参子传父
vue子传父用$emit实现 1.文件目录结构 2.parent父组件内容 <template> <div class="wrap"> <div> ...
随机推荐
- 【一起学源码-微服务】Eureka+Ribbon+Feign阶段性总结
前言 想说的话 这里已经梳理完Eureka.Ribbon.Feign三大组件的基本原理了,今天做一个总结,里面会有一个比较详细的调用关系流程图. 说明 原创不易,如若转载 请标明来源! 博客地址:一枝 ...
- [JavaScript设计模式]惰性单例模式
惰性单例模式 之前介绍了JS中类的单例模式,这次我们讨论下单例模式的应用.在众多网站中,登录框的实现方式就是一个单例,点击一次就展示一次,所以我们可以在页面加载好的时候就创建一个登录框,点击页面上的登 ...
- Scala实践4
一.数组 在Scala中,用()来访问元素,数组声明的语法格式如下 : var z:Array[String] = new Array[String](3) 或 var z = new Array[S ...
- js最简单的编写地点
1. 在哪里? 在浏览器的控制台. 2. 有什么作用? 方便快捷的测试纯js代码语句. 3. 如何使用? Google浏览器为例: 按 F12键 打开 开发者工具 (或者 浏览器工具栏 => ...
- cocoa pods最新安装说明和使用方法
最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sources - ...
- JS 头像显示
HTML <div class="form-group"> <label class="col-sm-3 control-label"> ...
- Java入门 - 语言基础 - 02.开发环境配置
原文地址:http://www.work100.net/training/java-environment-setup.html 更多教程:光束云 - 免费课程 开发环境配置 序号 文内章节 视频 1 ...
- 利用Springmvc的AbstractXlsxView下载Excel文件
设计一个模型,在针对多中数据类型进行拓展 public abstract class ExcelView extends AbstractXlsxView { public CellStyle cel ...
- Bug的等级程度(Blocker, Critical, Major, Minor/Trivial)及修复优先级
Priority()和Severity(严重程度)是Bug的两个重要属性.很多新人经常混淆这两个概念. 通常,人员在提交Bug时,只定义Bug的Severity, 即该Bug的严重程度, 而将Prio ...
- 14、python异常处理及断言
前言:本文主要介绍python中异常的处理及断言,包括异常类型.异常捕获.主动跑出异常和断言. 一.异常类型介绍 什么是异常?异常即是一个事件,该事件会在程序执行过程中发生,会影响程序的正常执行,一般 ...