vue---子调父 $emit (把子组件的数据传给父组件)
ps:App.vue 父组件
Hello.vue 子组件
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---子调父 $emit (把子组件的数据传给父组件)的更多相关文章
- 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)
ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...
- 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属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- vue $emit 父组件与子组件之间的通信(父组件向子组件传参)
1.首先新建一个子页面为 env.vue的文件(名字这里大家可以自取) 2.然后把子页面引入父页面,代码如图: import env from '@/components/common/env' ex ...
- Vue中父组件使用子组件的emit事件,获取emit事件传出的值并添加父组件额外的参数进行操作
需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象 ...
- 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?
首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
随机推荐
- 创建 LVM
1.将物理磁盘设备条带化为物理卷 # pvcreate /dev/sdb 查看物理卷: # pvs# pvdisplay 2.创建卷组,并添加 PV 到卷组 # vgcreate vg1 /dev/s ...
- Java创建线程的两种方法
大多数情况,通过实例化一个Thread对象来创建一个线程.Java定义了两种方式: 实现Runnable 接口: 可以继承Thread类. 下面的两小节依次介绍了每一种方式. 实现Runnable接口 ...
- Deepin中安装docker
1.sudo apt install docker-ce: 2.安装好后可以用docker version查看一下是否成功,还可以通过网络详情里是否多了一个docker0来判断: 3.sudo use ...
- java实现屏幕截屏功能
最近在项目中遇到这样一个需求,用户生成推广海报想要发送给朋友,但是推广海报是用html网页写的,这时候想要分享给朋友的话只能用户自己手机截图,显然这样的用户体验是不友好的,如果可以给用户一个按钮实现一 ...
- java当中JDBC当中请给出一个sql server的stored procedure例子
3.sql server的stored procedure例子: import java.sql.*;public class StoredProc0 {public static void main ...
- Python类的访问限制
使用两个_将变量设置为private,访问变量可定义get方法,对变量值修改可定义set方法,修改变量值的时候可检查参数的有效性. class Student(object): #定义一个Studen ...
- c++ 编译 curl 报错 数组‘__curl_rule_01__’的大小为负 解决方法
背景:在原有的项目GCC编译环境下(arm-linux 32位),增加x86-linux 64位的编译环境,编译curl库的时候发生错误. 其他:编译服务器为64位Centos 编译错误提示 /inc ...
- python 之 并发编程(守护线程与守护进程的区别、线程互斥锁、死锁现象与递归锁、信号量、GIL全局解释器锁)
9.94 守护线程与守护进程的区别 1.对主进程来说,运行完毕指的是主进程代码运行完毕2.对主线程来说,运行完毕指的是主线程所在的进程内所有非守护线程统统运行完毕,主线程才算运行完毕详细解释:1.主 ...
- Oracle 11g xe版本---总结1
一.创建用户和授予权限 1.1 环境: Oracle 11g xe 第三方图形客户端: PLSQL Windows 10 必须登录 HR 用户,下面的查询会使用到 HR 中的表. 1.2 SQL 语句 ...
- Smart3D飞控&地方坐标系
资源 ContextCapture(原Smart3D)教程 | Wish3D 航测数据处理答疑55问!涉及CC.Pix4D.Photoscan.EPS等常见软件问题_云进行 飞控软件 Smart3D常 ...