子组件调用父组件的函数,使用$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. C++用指针变量作为函数的参数接受数组的值的问题的总结

    实参和形参的四种结合方式 实参 形参 实例 数组名 数组名 1.1 数组名 指针变量 1.2 指针变量 数组名 1.3 指针变量 指针变量 1.4 本文以输入10个整数,然后对其进行排序,然后输出的程 ...

  2. Evil Book -- CodeChef

    传送门 分析 对于这道题,我们首先思考一个贪心策略,即对于所有我们要打败的厨师我们肯定可以先打败需使用帮助次数少的厨师再打败需使用帮助次数多的厨师 ,因为这样可以使得能支付得起帮助费用的可能性尽可能的 ...

  3. bzoj2134 错选单位

    传送门 题目 Input n很大,为了避免读入耗时太多, 输入文件只有5个整数参数n, A, B, C, a1, 由上交的程序产生数列a. 下面给出pascal/C/C++的读入语句和产生序列的语句( ...

  4. Mysql--基本配置

    登录的常用参数 mysql -uroot -p    之后再加上密码 mysql -uroot -p+密码   这个方法不安全 mysql -hlocalhost -uroot -p  之后再加上密码 ...

  5. 《Head First Servlets & JSP》-6-会话管理-listener etc. demo

    工程结构 上下文参数示例 示例程序展示了如何从上下文读取参数,并在上下文监听器中生成属性对象和在上下文中设置属性. 建立一个简单的JavaBean对象作为属性:Dog.java package com ...

  6. 【Android小技巧】android 按键如何能自动触发点击

    使用button.performClick();方法 EditText 中hint的字体跟 textSize的字体大小一样大

  7. angular 分页2

    http://www.alliedjeep.com/2547.htm AngularJS Code (Users.js) var Users = angular.module('Users', []) ...

  8. 一键结束port 5037占用

    输入cmd进入dos界面,进入android-sdk-windows\platform-tools目录,执行下面命令启动adb start-server出现下面错误* daemon not runni ...

  9. gRPC官方文档(通讯协议)

    文章来自gRPC 官方文档中文版 HTTP2 协议上的 gRPC 本文档作为 gRPC 在 HTTP2 草案17框架上的实现的详细描述,假设你已经熟悉 HTTP2 的规范.产品规则采用的是ABNF 语 ...

  10. jpa batch批量操作save和persist比较

    1.网上最常见的JPA----entityManager批量操作方法 private EntityManager em; @PersistenceContext(name = "Entity ...