父组件内容:

<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. HBase学习笔记2 - HBase shell常用命令

    转载请标注原链接:http://www.cnblogs.com/xczyd/p/6639397.html 扫表的时候限定行数 scan } 即为扫表的时候,限定只输出五条数据 ============ ...

  2. The listener supports no services

    问题描述 sql> lsnrctl start 提示: The listener supports no services The command completed successfully ...

  3. linux自动备份lampp的日志

    要求是:每天23:59自动备份lampp的日志/opt/lampp/logs/access_log 放到这个目录下/tmp/bak 命名格式:access_log.日期 1.新建shell脚本#vi ...

  4. 配置https and http2 local本地开发环境

    今天,几乎所有你访问的网站都是受HTTPS保护的.如果你还没有这样做,是时候这样做了.使用HTTPS保护您的服务器也就意味着您无法从非HTTPS的服务器发送请求到此服务器.这对使用本地开发环境的开发人 ...

  5. 关于pycharm中导入自己写的模块没有智能提示的解决办法

    在pycharm界面中右击py文件所在的文件夹,选择Make Directory as文件,选择其中一个即可

  6. git 创建删除分支

    进入仓库目录 -- 查看本地分支 git branch -- 查看远程分支 git branch -r -- 查看远程和本地的分支 git branch -a -- 下载远程分支代码,并切换到分支 进 ...

  7. 对css语法中position值的理解

    1.static 正常定位,就是默认定位,根据他的top,right,bottom,left的值 2.relative 根据他top,right,bottom,left的值偏移 3.absolute ...

  8. Excel 导入 Mysql

    1.将Excel xls文件 另存为 csv 文件: 2.用记事本打开csv文件,然后另存为编码为utf-8的txt文件: 3.将txt文件后缀更改为csv 4.最后,用phpmyadmin或其他数据 ...

  9. Asp.Net : Page.RegisterStartupScript及 不执行的原因

    RegisterStartupScript 把script放置在ASP.NET page的底部,而RegisterClientScriptBlock把script放置在ASP.NET page的顶部 ...

  10. theano安装问题

    WARNING (theano.configdefaults): g++ not available, if using conda: `conda install m2w64-toolchain` ...