子组件是不能直接使用父组件中的方法的,需要进行事件绑定(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中子组件调用父组件的方法的更多相关文章

  1. Vue中子组件调用父组件的方法

    Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  3. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  4. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  5. vue 子组件调用父组件的函数

    子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...

  6. React篇-子组件调用父组件方法,并传值

    react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...

  7. react typescript 子组件调用父组件

    //父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...

  8. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  9. Vue 子组件调用父组件方法

    父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...

随机推荐

  1. java生成图片验证码(转)--封装生成图片验证码的工具类

    博客部分内容转载自 LonlySnow的博客:后台java 实现验证码生成 1.controller方法 @RequestMapping(value = "/verifycode/img&q ...

  2. time,sys,os模块

      1.time模块 a:结构化时间:struct_time:通过time.localtime获取到一个时间对象,通过这个对象得到对象属性 ****localtime()如果没有参数,默认返回是一个时 ...

  3. Oracle And子句

    Oracle And子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,将学习如何使用Oracle AND运算符来组合两个或更多的布尔表达式. ...

  4. linux/Unix下的vim/vi指令的使用方法

    概述 以下这篇文章介绍的是关于vim的使用方法,由于我本身对linux没有太多的研究,写下的这篇文章纯属是在实际中经常使用vim指令,想通过这篇文章记录下来,方便以后使用时查找方便.个人认为,对于普通 ...

  5. Oracle JET(二)Oracle JET使用

    Oracle JET 开发分为 Web 应用程序开发和移动应用程序开发(WebApp). Oracle JET Web 应用程序开发入门: 使用方法三种: 使用 Oracle JET Yeoman 生 ...

  6. clojure 语法

    Clojure 是一种运行在 Java 平台上的 LISP 方言,LISP 是一种以表达性和功能强大著称的编程语言. ; 分号作为注释的开始 ; clojure 用括号把元素括起来,元素之间用空格隔开 ...

  7. 嵌入式Linux之gdb配置和使用

    背景: ARM Cortext-A53核+Linux 4.1.12,内核空间64位,用户态32位,gdb版本7.10.1 GDB编译: 1)手动下载gdb-7.10.1.tar.gz源码编译 ./co ...

  8. C# WPF 4.5 RibbonWindow

    WPF  RibbonWindow , Z .Net4.5里有自带的RibbonWindow,需要引用 System.Windows.Controls.Ribbon.dll 题外话:自带的Ribbon ...

  9. 测开之路九十九:js函数、事件、window窗体对象

    函数:function 函数名(参数列表) 事件 单击:onclick()表单提交:onsubmit()鼠标经过:onmouseover()值改表时:onchange() window窗体对象转跳:w ...

  10. astype()函数

    1astype()函数可用于转化dateframe某一列的数据类型 如下将dateframe某列的str类型转为int,注意astype()没有replace=True的用法,想要在原数据上修改,要写 ...