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

子组件

<template>
<div>
<div class="warp-mark" v-if="bingGoShow">
<img src="../../assets/resources/common/bingo.jpg" alt="">
<div class="again" @click="again">
<img src="../../assets/resources/common/again.png" alt="">
</div>
<div class="nextStep">
<img src="../../assets/resources/common/nextStep.png" alt="">
</div>
</div>
</div>
</template> <script>
export default {
data() {
return{
bingGoShow:true
}
},
methods:{
again(){
this.$emit("onceAgain")
},
}
}
</script>

父组件

<template>
<div>
<mark @onceAgain="again"></mark>
</div>
</template> <script>
import mark from '@/components/mark /mark .vue';
export default {
methods:{
again(){
alert("测试")
}

} } </script>

  

vue 子组件调用父组件的函数的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. react typescript 子组件调用父组件

    //父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...

  7. iframe子页面调用父页面javascript函数的方法

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...

  8. Vue 子组件调用父组件方法

    父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...

  9. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

随机推荐

  1. 分布式锁1 Java常用技术方案【转载】

    前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题,那么就要利用分布式锁来解决这些问题.所以自己结合实际工作中的一些经验和网上看到的一些资 ...

  2. HDOJ 1023 Train Problem II 卡特兰数

    火车进站出站的问题满足卡特兰数...卡特兰数的相关知识如下: 卡特兰数又称卡塔兰数,是组合数学中一个常出现在各种计数问题中出现的数列.由以比利时的数学家欧仁·查理·卡塔兰 (1814–1894)命名. ...

  3. SDUT 3342 数据结构实验之二叉树三:统计叶子数

    数据结构实验之二叉树三:统计叶子数 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 已知二叉 ...

  4. Ryouko's Memory Note

    题目意思:一个书有 n 页,每页的编号依次从 1 到 n 编排.如果从页 x 翻到页 y,那么|x-y|页都需要翻到(联系生活实际就很容易理解的了).接着有m pieces 的 information ...

  5. Bootstrap 组件之 List group

    简介 List group 指列表.当然,Bootstrap 列表不局限于由 <ul> 和 <li> 标签构成的. Bootstrap 中一共三种列表的构成方式,这里 有一个例 ...

  6. [译]Javascript中的Ternary operator

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  7. malloc/free 与 new/delete同与不同

    一.相同点 1.都是从堆上申请内存,由程序员来掌控这段内存的申请与释放. 2.对于内置类型,两者使用没有太大区别. 二.不同点 1.malloc/free是C++/C语言的标准库函数,需要库支持:ne ...

  8. Axure RP7.0移动互联网产品原型设计 中文pdf扫描版

    移动互联网原型设计,简单来说,就是使用建模软件制作基于手机或者平板电脑的App,HTML 5网站的高保真原型.在7.0 之前的版本中,使用Axure RP进行移动互联网的建模也是可以的.比如,对于桌面 ...

  9. CentOS6.5上Zabbix3.0的RPM安装【三】-安装并添加Agent

    七.Download and install Zabbix Agent Zabbix Agent is required to install on all remote systems needs  ...

  10. Python3 中类的反射

    1.针对类中方法的反射 # 反射的使用 class Dog(object): def __init__(self,name): self.name = name def eat(self): prin ...