子组件调用父组件的函数,使用$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. 20行核心代码:jQuery实现省市二级联动

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

  2. 前端学习笔记2017.6.21-html是个什么东西

    html有两种意思,html语言和html格式 html语言是一种面向人类的计算机语言,这是啥意思?人类用html这种语言描述出一个网页的样子,浏览器解析这个语言并展示出来. html格式是一种文件格 ...

  3. BuilderPattern(23种设计模式之一)

    设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计模式六大 ...

  4. 6.Model类

    Basic Concepts      在Model/View结构中,Model提供标准的接口让View和Delegate获得数据.在QT中,标准的接口都被定义在QAbstractItemModel类 ...

  5. Git 之 修复bug

    前面介绍了Git版本控制,为我们省去了很多不必要的麻烦. 回滚 有没有想过,在我们开发过程中,修改需要是常有的事,如果我们现在不想要这个功能了,那么如何回到之前的版本呢?回滚,回到上一个版本. 那如果 ...

  6. Linux之tcpdump使用详解

    1.1  三种关键字 关于类型的关键字 第一种是关于类型的关键字,主要包括host,net,port, 例如 host 210.27.48.2,指明 210.27.48.2是一台主机,net 202. ...

  7. Dapper --Execute

    Dapper-Execute Ececute是一种可被任何IDbConnection类型的对象调用的扩展方法.它可以执行一次或多次命令, 并返回受影响的行数.此方法通常用于执行存储过程.插入.更新.删 ...

  8. android studio 程序员有福了—从layout自动生成viewholder类

    狂点这里下载 超级牛逼的插件啊,比那些使用SparseArray的强太多了! 在android studio 1.0上测试,没有问题. 不说了直接说功能 Android Toolbox Plugin ...

  9. javascript 取掉空格自定义函数

    js  取掉空格自定义函数 //取掉左右空格: function trim(str){ return str.replace(/(^\s*)|(\s*$)/g, ""); } // ...

  10. nginx添加缓存以及判断是否缓存生效

    location ~.*\.(js|css|html|png|jpg|gif)$ { expires 3d; } expires    3d; //表示缓存3天 expires    3h; //表示 ...