vue.js(19)--vue中子组件调用父组件的方法
子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit('自定义方法名')语句完成父组件中方法到子组件中的调用,最后直接调用子组件中定义的方法即可。
<div class="app">
<mycom v-on:func="parentshow"></mycom>
<!-- 通过v-on:绑定方法将父组件中的方法绑定到func,
然后在子组件中定义一个方法(this.$emit('func'))将func传递给子组件,
这样子组件就可以通过自己的方法来调用父组件的方法 -->
</div>
<template id="cmp">
<div>
<a href="#" @click.prevent="show">快点我</a>
</div>
</template>
<script>
var vm = new Vue({
el:'.app',
data:{
msg:'我是父组件的方法'
},
methods:{
parentshow(){
alert(this.msg)
}
},
components:{
mycom:{
template:'#cmp',
methods:{
show(){
this.$emit('func')//通过此方法在子组件建立方法来调用父组件中的方法
}
}
}
}
})
</script>
vue.js(19)--vue中子组件调用父组件的方法的更多相关文章
- Vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- vue 子组件调用父组件的函数
子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...
- React篇-子组件调用父组件方法,并传值
react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...
- react typescript 子组件调用父组件
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- Vue 子组件调用父组件方法
父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...
随机推荐
- asp.net (web)选择文件夹 上传文件
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
- Socket通信前必须考虑的几件事
如何处理I/O?是让程序阻塞等待响应,还是在后台处理这些事?这是软件设计的关键因素.阻塞式的I/O操作会让程序架构难以扩展,而后台处理I/O也是比较困难的. 如何处理那些临时的.来去自由的组件?我 ...
- [BZOJ3199][SDOI2013]escape:半平面交
分析 好像叫V图什么的. 容易发现,对于每个点,其监视的范围就是这个点与其它所有点的垂直平分线分割平面后的半平面交.由于数据范围很小,所以我们可以直接枚举每个点,使用双端队列求出其监视的范围.若两个点 ...
- 4.16中Montage的一些变化
用4.16版本跟着网上的几篇Montage教程(分别是对应4.6和4.8版本)做,遇到各种各样的问题,经过各种搜索和分析,最终终于搞定了. 4.16版的Montage和之前有了不小的变化,总结如下: ...
- Oracle诊断:在程序的运行中,有时候数据库会断开连接
在程序的运行中,有时候数据库会断开连接,然后报下面错误: ORA-12519: TNS:no appropriate service handler found 可用的服务处理程序没有找到. 1. ...
- Linux shell - 重命名文件和文件夹(mv)
linux下重命名文件或文件夹的命令mv既可以重命名,又可以移动文件或文件夹. 例子:将目录A重命名为B mv A B 例子:将/a目录移动到/b下,并重命名为c mv /a /b/c
- jQuery UI Widget Factory
https://learn.jquery.com/jquery-ui/widget-factory/ The jQuery UI Widget Factory is an extensible bas ...
- DesignWare I2C模块的验证
I2C通信协议主要同一块板上芯片间的通信,因此速度不是很高.SCL为时钟线,SDA为数据线.时钟由主设备发送给从设备,数据可以在两设备间互传. 在测试DW_I2C模块时,如果外面都包了一层,在tb中只 ...
- Java ——Scanner
本节重点思维导图 import java.util.Scanner;//导包 public class Demo { public static void main(String[] args) { ...
- clinical-逻辑核查数据的操作
1. 前端页面样式 2. 前端代码 添加: 展示: 修改 删除 3. 后台代码 封装的DAO类数据 # coding: utf-8 from pdform.services.db.dbCore imp ...