父组件内容:

<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. Python全栈之路----目录

    Module1 Python基本语法 Python全栈之路----编程基本情况介绍 Python全栈之路----常用数据类型--集合 Module2 数据类型.字符编码.文件操作 Python全栈之路 ...

  2. android 版本更新适配8.0,解决8.0手机无法更新自动安装apk

    随着android 7.0的普及android 8.0的也逐渐流行起来,那么google对权限方面又有了新的修改.而且我发现在android8.0中除了一些bug,比如说:在小米6(Android 8 ...

  3. UEditor之实现配置简单的图片上传示例 转

    http://blog.csdn.net/huangwenyi1010/article/details/51637427 + http://blog.csdn.net/cr135810/article ...

  4. vue项目localhost可以访问 ip不能访问

    解决方法: 如图所示:

  5. ubuntu16.04如何安装floodlight并且连接eclipse

    按顺序走,亲测没出错.用的是Luna R版本的eclipse https://floodlight.atlassian.net/wiki/spaces/floodlightcontroller/pag ...

  6. 经典问题----最小生成树(prim普里姆贪心算法)

    题目简述:假如有一个无向连通图,有n个顶点,有许多(带有权值即长度)边,让你用在其中选n-1条边把这n个顶点连起来,不漏掉任何一个点,然后这n-1条边的权值总和最小,就是最小生成树了,注意,不可绕成圈 ...

  7. 宝塔linux面板 解决TP3.2 404

    在配置文件中加入一下配置: location / { if (!-e $request_filename) { rewrite ^/(.*)$ /index.php/$1; } } location ...

  8. Java扩展方法之SPI

    API:API(Application Programming Interface)表示应用程序编程接口 SPI:SPI(Service Provider Interface)表示服务提供商接口  A ...

  9. gitlab 添加 ssh

    git 客户端无法拉取gitlab仓库代码,登陆网页端,查看仓库主页有下面的提示 因此需要添加ssh公钥,才能上传下拉代码 windows平台: 首先需要安装git了. 在存放代码的目录中,右键选择 ...

  10. SQL 快速生成不重复的卡号

    --0042-9923-3598 select id = right('000000000000' + cast(cast(rand(checksum(newid()))*1000000000000 ...