子组件向父组件传值($emit)
1、定义子组件
<template><div>子组件:<span>{{childValue}}</span><!-- 定义一个子组件传值的方法 --><input type="button" value="点击触发" @click="childClick"></div>
</template>
<script>export default {data () {return {childValue: '我是子组件的数据'}},methods: {childClick () {// childByValue是在父组件on监听的方法// 第二个参数this.childValue是需要传的值this.$emit('childByValue', this.childValue)}}}
</script>
2、定义父组件
<template><div>父组件:<span>{{name}}</span><br><br><!-- 引入子组件 定义一个on的方法监听子组件的状态--><child v-on:childByValue="childByValue"></child></div>
</template>
<script>import child from './child'export default {components: {child},data () {return {name: ''}},methods: {childByValue: function (childValue) {// childValue就是子组件传过来的值this.name = childValue}}}
</script>
总结:
子组件向父组件传值,同样的他们之间的契合点也是子组件引入的地方。
首先来到子组件,用$emit发射数据
然后再来到父组件,在契合点的地方
子组件向父组件传值($emit)相关推荐
- 019_Vue子组件向父组件传值
1. 父组件向子组件传递信息 1.1. props传递数据原则: 单向数据流. 1.2. 子组件通过自定义事件向父组件传递信息 <button @click='$emit("enlar ...
- 组件间数据交互——父组件向子组件传值( props属性值类型) 子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- vue 子组件给父组件传值
vue通信之子组件给父组件传值 子组件给父组件传值背景一般是子组件中某一事件之后,得到的某一状态或者是值,想要通知父组件改变. 通过自定义事件传值. 子组件: <Button type=&quo ...
- Vue学习--子组件向父组件传值
Vue–子组件向父组件传值 //子组件 <template><div id="foot"><li @click="point(1)" ...
- vue element ui 子组件向父组件传值
写项目碰到弹窗(子组件)向他的父组件传值,具体如下: 父组件: <Zjhinfo v-if="ZjhinfoVisible" ref="Zjhinfo" ...
- Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>// 创建 Vue 实例,得到 ViewModelvar vm = new ...
- ⒒ Vue子组件向父组件传值
组件之间传值 父组件向子组件传值使用props,参考:父组件向子组件传值! 子组件向父组件传值,主要是以下三个步骤组成: 在子组件中自定义一个事件,使用 this.$emit('btn-click', ...
- 父html向子html传递参数,子组件向父组件传值
react 子组件怎么向父组件传值 Vue中子组件给父组件传值,父组件接收不到 vue组件在html声明的事件尽量不要用大写的哈,会被解析成小写的,因为html属性是大小写不敏感的 另外调用的函数要生 ...
- Vue子组件向父组件传值(this.$emit()方法)
子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder fr ...
最新文章
- /proc/meminfo详解 = /nmon analysis --MEM
- ElementUI的组件拆解之Tooltip
- StarUML 破解方法2.X(转)
- Docker 方式安装 Nginx 、阿里云服务器上装 Ngnix
- Java笔记12-函数式接口
- python-实现栈结构
- 两边定宽,中间自适应布局的四种实现方法
- 京东回应「被薅 7000 万、项目组全体开除」;微信朋友圈屏蔽支付宝集五福;MySQL 8.0.19 发布 | 极客头条...
- 计算机体系结构a类会议,通信、计算机等领域常见A类国际学术会议.PDF
- Spring+hibernate+JSP实现Piano的数据库操作---4.配置文件
- 关于Savitzky-Golay滤波器
- centos7系统忘记root密码
- 稳压二极管型号大全(转载)
- sao java_SAO Utils
- PostgreSQL update多张表关联查询更新
- UVALIVE 2678
- 两种include方式的作用
- 怎么把视频里的音乐提取成音频?
- 利用SOLIDWORKS仿真进行三点弯曲试验
- 在“我想成为一名科学家”破灭以后呢?
热门文章
- footer.php置底,详解CSS五种方式实现Footer置底
- 运动蓝牙耳机哪个品牌好、2023年最出色运动蓝牙耳机推荐
- Oracle11g本地数据库创建用户和密码,附赠使用PL/SQL软件登录用户
- win10下双硬盘做深度linux,win10+ubuntu18双硬盘双系统安装记录+深度学习环境搭建...
- FreePBX 命令一览
- 使用Qt动画框架设计角色的二维动画
- 4.Spring Cloud (Hoxton.SR8) 实战笔记—项目中细节实现 约束 注意事项、模块难点总结、Lambda表达式
- c#:打印出所有的“水仙花数”
- 客户逾期贷款预测[6] - 网格搜索调参和交叉验证
- shell脚本执行出现“已杀死”