父组件内容:

<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. 工具提高效率 - iterm2

    快捷键 command + d, command + shift +d 显示所有记录 ITERM默认设置了终端能保留的历史输出行数,在进行调试时特别不方便,一旦输出过多就无法看到完整的历史记录. 在P ...

  2. linux解压缩文件名乱码问题 亲测可用

    unar 这个工具会自动检测文件的编码,也可以通过-e来指定:unar file.zip 即可解压出中文文件.

  3. ios 当margin-left margin-right 超过设备宽度

    ios 当margin-left  margin-right过长,相加超过  超过设备宽度时,导致页面不能上下滚动,目前尚未找到解决办法,记录一下

  4. hdu 1518 BFS

    Given a set of sticks of various lengths, is it possible to join them end-to-end to form a square? I ...

  5. 简述grub启动引导程序配置及命令行接口详解

    一.版本 grub:Grand Unified Bootloader grub 0.x:grub legacy grub 1.x:grub2 二.grub legacy 三个过程 stage1:安装在 ...

  6. 多管齐下显神威-2017逐浪CMS开启全新建站与WEB技术革命

    培训班里说百遍,不如商业场景来检验. PS.AI.JS工具齐上阵,一统逐浪CMS全网中间件. 从逐浪软件创业团队成立.到逐浪CMS产品,以企业形式运营,历经十二载风雨,作为华文世界排名第一的dotNE ...

  7. Linux 系统的用户和组

    目录 1. 用户及组相关文件 2. 用户相关查询 2.1 直接通过cat文件查看用户及组文件内容 2.2 使用下面查询命令查看 3. 使用操作命令修改用户及组相关文件 3.1 专有编辑命令(仅限高级用 ...

  8. JAVA工具类-StrUtils

    public class StrUtils { public static final String UTF_8 = "UTF-8"; /** * 去掉小数字符串后面无用的零 */ ...

  9. 芯灵思Sinlinx A64开发板 Linux内核等待队列poll ---阻塞与非阻塞

    开发平台 芯灵思Sinlinx A64 内存: 1GB 存储: 4GB 开发板详细参数 https://m.tb.cn/h.3wMaSKm 开发板交流群 641395230 阻塞:阻塞调用是指调用结果 ...

  10. 《Self-Attention Generative Adversarial Networks》里的注意力计算

    前天看了 criss-cross 里的注意力模型  仔细理解了  在: https://www.cnblogs.com/yjphhw/p/10750797.html 今天又看了一个注意力模型 < ...