【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)
ps:App.vue 父组件
Hello.vue 子组件 <!--App.vue :--> <template>
<div id="app">
<hello @newNodeEvent="parentLisen" />
</div>
</template> <script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentLisen(evtValue) {
//evtValue 是子组件传过来的值
alert(evtValue)
}
}
}
</script> <!--Hello.vue :--> <template>
<div class="hello">
<input type="button" name="" id="" @click="chilCall()" value="子调父" />
</div>
</template> <script>
export default {
name: 'hello',
'methods': {
chilCall(pars) {
this.$emit('newNodeEvent', '我是子元素传过来的')
}
}
}
</script>
【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)的更多相关文章
- vue---子调父 $emit (把子组件的数据传给父组件)
ps:App.vue 父组件 Hello.vue 子组件 ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> & ...
- 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- vue 子组件把数据传递给父组件
<div id="app"> <child v-on:drop='parent'></child> //这里v-on:drop="pa ...
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- Vue的父子组件v-model双向绑定,父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- vue $emit 父组件与子组件之间的通信(父组件向子组件传参)
1.首先新建一个子页面为 env.vue的文件(名字这里大家可以自取) 2.然后把子页面引入父页面,代码如图: import env from '@/components/common/env' ex ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- Vue中父组件使用子组件的emit事件,获取emit事件传出的值并添加父组件额外的参数进行操作
需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象 ...
随机推荐
- BZOJ 2527 Meteors | 整体二分
BZOJ 2527 Meteors 题意 一个圆环上有m个位置,编号为1~m,分别属于n个国家. 有k个时刻,每个时刻都会给圆环上的一个区间中每个位置的值加上一个数. 每个国家有一个目标,问对于每个国 ...
- BZOJ3142 [Hnoi2013]数列 【组合数学】
题目链接 BZOJ3142 题解 题意:选一个正整数和\(K - 1\)个\([1,M]\)中的数,使得总和小于等于\(N\),求方案数模\(P\) 题目中\(K(M - 1) < N\)的限制 ...
- JS的作用域和闭包
1.作用域 作用域是根据名称找变量的一套规则. 变量的赋值操作会执行两个动作,首先编译器会在当前作用域中声明一个变量(如果之前没有声明过),然后在运行时引擎会在作用域中查找该变量,如果能够找到就会对它 ...
- mysqldump导出多个数据库
mysqldump -uroot -p111111 -q -e -R -x --databases account game_s1 game_s2 ...... > D:\backup.sql ...
- Redis学习基础二
回顾:上一基础中已了解 ( 什么是redis .redis 的三大特点.安装,和数据配置) 接下来浅尝Redis的数据类型,时间煮雨...... 一.Redis数据类型 redis支持五中数据类型(s ...
- dingo 内部调用获取异常信息
$exception->getResponse(); $params = [ 'company_id' => $this->request->input('company_id ...
- shell 中的流程控制关键字
if...else if [ $1x == "ab"x ]; then echo "you had enter ab" elif [ $1x == " ...
- 浏览器json数据格式化
在浏览器上作接口测试的时候看到json 格式的数据是密密麻麻的一片,眼睛都花了.. 如: 设置方法: chrome 的右上角选择,然后--- 更多工具--- 扩展程序 ---- JSO ...
- linux命令总结之lsof命令
简介 lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控 ...
- unity脚本封装成dll
先申明一下这样做是有需要的.当我们需要把脚本提供给第三方使用,而又不希望对方看到具体的实现过程,这时候就需要将代码封装编译成dll文件,供第三方调用.或是多个项目都要用到同一个模块或同样的功能,则可以 ...