父组件内容:

<template>
<div>
<info-wnd ref="infoWnd" @parentClick="wndClick"></info-wnd>
  </div> </template>
<script>
import infoWnd from './info-wnd';
export default {
data() {
return {
}
},
components: { infoWnd },
methods: {
wndClick() {
console.log('这是父组件的方法');
}
}
}
</script>

子组件Info-wnd.vue组件内容:

<template>
<div @click="divClick">
<span>这是子组件</span>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
divClick() {
this.$emit('parentClick'); //调用父组件的方法
}
}
}
</script>

Vue 子组件调用父组件方法的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  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.js(19)--vue中子组件调用父组件的方法

    子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit('自定义方法名')语句完 ...

随机推荐

  1. java 环境的安装、设置免密登陆、进行hadoop安装、关闭防火墙

    1.去这个网站下载对应的版本:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html我这 ...

  2. slf4j的使用2

    一.Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行 ...

  3. Redis事务和实现秒杀功能的实现

    今天带着学生学习了Redis的事务功能,Redis的事务与传统的关系型数据库(如MySQL)有所不同,Redis的事务不能回滚. Redis中使用multi.exec.discard.watch.un ...

  4. 例:三位老师对某次数学竞赛进行了预测,他们的预测如下:   甲:学生A得了第一名,学生B得第三名。   乙:学生C得了第一名,学生D得第四名。   丙:学生D得了第二名,学生A得第三名。 结果表明,他们都说对了一半,说错了一半,并且无并列名次,输出A、B、C和D各自的名次。

    public class demo { public static void main(String[] args) { int a,b,c,d;//代表四个学生 boolean x1,x2,x3;/ ...

  5. 学习笔记TF056:TensorFlow MNIST,数据集、分类、可视化

    MNIST(Mixed National Institute of Standards and Technology)http://yann.lecun.com/exdb/mnist/ ,入门级计算机 ...

  6. Python基础:四、python的优缺点

    python是一门动态解释性的强类型语言 python的优点: 1. python的定位是"优雅"."明确"."简单" python程序看上 ...

  7. Echart横坐标时间轴滑动

    主要针对于dataZoom的使用,代码如下: option = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigger: ...

  8. Ansible 安装与配置(一)

    公司大概有200多云主机需要进行管理,但是如果通过手工管理费时还累最终结果也容易出错,所以考虑通过自动化的方式来管理云主机,目前开源的自动化工具,大家用的比较多的有Ansible和Saltstack这 ...

  9. 4.认识Angular组件之2

    11. 变化监测:Angular提供了数据绑定的功能.所谓的数据绑定就是将组件类的数据和页面的DOM元素关联起来.当数据发生变化时,Angular能够监测到这些变化,并对其所绑定的DOM元素 进行相应 ...

  10. Idea动态java模板配置

    使用全能idea工具可以可以大大的提升开发效率,其中有个特别有用技能跟大家分享一下. 相比大家都用过idea的快速插入代码功能,插入诸如getter,setter还有构造函数生成,做到了只需一键点击就 ...