子组件是不能直接使用父组件中的方法的,需要进行事件绑定(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. postman基础

    Postman使用场景: 开发接口的时候需要快速的调用接口,以便调试 测试的时候需要非常方便的调用接口,通过不同的参数去测试接口的输出 这些接口调用是需要保存下来的反复运行的 在运行过程中如果有断言( ...

  2. 用TweenMax.js动画让数字动起来

    html: <div class="val2">0</div> js: let val2 = document.getElementsByClassName ...

  3. STM32内部时钟设置-寄存器版

    STM32寄存器版本——内部时钟设置 同时要记得把延时初始化函数设置好 //系统时钟初始化函数 //pll:选择的倍频数,从2开始,最大值为16 //pll:选择的倍频数,这里使用内部时钟,PLL为4 ...

  4. php array_shift()函数 语法

    php array_shift()函数 语法 作用:删除数组中第一个元素,并返回被删除元素的值.富瑞联华 语法:array_shift(array) 参数: 参数 描述 array 必需.规定数组. ...

  5. BZOJ 3357: [Usaco2004]等差数列 动态规划

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...

  6. Nginx 在 Linux 下安装与搭建集群

    搭建集群图例 集群搭建图如下,为了简单一点,使用一个Nginx服务器+两个Tomcat服务器,省略数据库部分: 环境说明 Linux 为 CentOS 7.2 发行版 + Java jdk 1.8 + ...

  7. getAttribute和getParameter

    getAttribute表示从request范围取得设置的属性,必须要先setAttribute设置属性,才能通过getAttribute来取得,设置与取得的为Object对象类型 getParame ...

  8. rman备份/恢复

    全备脚本 cat rman_full.sh #!/bin/bash export ORACLE_BASE=/opt/oracle export ORACLE_HOME=$ORACLE_BASE/pro ...

  9. flex几种多列布局

    基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; ...

  10. C++ Primer 第四版阅读笔记

    阅读笔记 初始化 变量定义指定了变量的类型和标识符,也可以为对象提供初始值.定义时指定了初始值的对象被称为是 已初始化的.C++ 支持两种初始化变量的形式:复制初始化和 直接初始化.复制初始化语法用等 ...