vue 子组件调用父组件的函数
子组件调用父组件的函数,使用$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 子组件调用父组件的函数的更多相关文章
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- React篇-子组件调用父组件方法,并传值
react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...
- react typescript 子组件调用父组件
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...
- iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
- Vue 子组件调用父组件方法
父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
随机推荐
- 获取当前设备的CPU个数
public class Test { public static void main(String[] args) { //获取当前设备的CPU个数 int availableProcessors ...
- 【转】nginx禁止访问某个文件和目录(文件夹)
nginx禁止访问所有.开头的隐藏文件设置 location ~* /.* {deny all;} nginx禁止访问目录, 例如:禁止访问path目录 location ^~ /path {deny ...
- Android studio中ShredPreferences 的简单使用
ShredPreferences是一个轻量级的数据存储方式,只能存取字符串了整型数据这一类的数据,如果要存储复杂的数据这个存储方式就不再适用 首先是要新建一个ShredPreferences的对象 p ...
- 100200F Think Positive
传送门 题目大意 给你一个数n和长度为n的序列,序列中的每个数均为1或-1,如果一个点j对于任意的k都满足题目中给的式子,则j是一个合法位置,问这样的j有多少个 分析 这道题有两种方法,分别对应代码1 ...
- MySQL介绍与安装
mysql介绍 #mysql就是一个基于socket编写的C/S架构的软件 #客户端软件 mysql自带:如mysql命令,mysqldump命令等 python模块:如pymysql 数据库管理软件 ...
- SDUT 2142 数据结构实验之图论二:基于邻接表的广度优先搜索遍历
数据结构实验之图论二:基于邻接表的广度优先搜索遍历 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Descript ...
- C++笔记--名字空间和异常
名字空间 成员函数可以在名字空间的定义里去声明,然后再去采用一种定义方式例如:namespace__name::member_name的方式去定义这个成员函数 namespace parser{ do ...
- java 英文笔记
JDBC涉及到的单词 Driver 驱动器 DriverManager (Manager 处理者,经理,管理人; 干事,理事; 〈美〉(政党等的)领袖; 策士,干才,干练的人;) create Sta ...
- CentOS使用NTFS-3G加载NTFS硬盘
CentOS使用NTFS-3G加载NTFS硬盘 CentOS 挂载NTFS格式硬盘时会报错unknown filesystem type 'ntfs',这时就需要用到第三方的插NTFS-3G来加载NT ...
- vmware vmware esxi5.x安装方法及解决错误
vmware Esxi5.x安装指南 vmware Esxi5文档中心官网地址: http://pubs.vmware.com/vsphere-55/index.jsp?topic=%2Fcom.vm ...