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 ...
随机推荐
- php实现大视频上传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- formdata方式上传文件,支持大文件分割上传
1.upload.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <h ...
- monit-日志监控工具
前段时间,CTO下达了一个brief,需要搭建monit日志监控应用,匹配日志中的异常信息,自动发送邮件/微信告警.具体的要求如下: 1.监控***项目的各个应用,nginx的日志,匹配到错误时发送告 ...
- 转载:PICT使用教程(设计测试用例工具)
原文:https://blog.csdn.net/quiet_girl/article/details/50699543 之前一篇写了正交设计助手的使用教程,与正交设计助手相比,个人觉得PICT的使用 ...
- 基于自定义的动态数组实现一个栈(Java语言)
关于动态数组,参见我的上一篇关于动态数组的博文https://www.cnblogs.com/inu6/p/11717129.html 1.什么是栈? (1)只能从一端添加元素,也只能从一端取出元素, ...
- Vue点击切换Class变化,实现Active当前样式
刚自学Vue不久,所以还不太熟,所以直接上代码. 一.先在data里增加一个变量,用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个 ...
- 最近使用的两个工具 winscp和xshell
最近在编译MONO源码时用到了这两个工具,感觉挺好,记录备忘 WINSCP 长这样 用于可视化的查看和操作远程服务器上的文件 xshell用于命令行下操作远程服务器,服务器的同学好多在用这个.命令行是 ...
- Scrapy爬虫框架下执行爬虫的方法
在使用Scrapy框架进行爬虫时,执行爬虫文件的方法是 scrapy crawl xxx ,其中 xxx 是爬虫文件名. 但是,当我们在建立了多个文件时,使用上面的命令时会比较繁琐麻烦,我们就可以使用 ...
- MK66FN2M0VLQ18
NXP Kinetis K66: 180MHz Cortex-M4F MCU, 2MB Flash, 256KB SRAM, Dual USBs (FS + HS), Ethernet, 144-LQ ...
- fedora23使用Xwayland的gnome-shell
gnome是桌面管理系统的名称, 包括gnome, kde, xfce等等 同时, gnome是旧的gnome 2 的桌面管理 在gnome 3中, 桌面管理系统叫做gnome shell. gnom ...