vue子组件获取父组件方法
注:以下代码未使用esLint语法检查
父组件:
<template>
<div class="wrapper">
<cp_action @parentMethod="macSelect"></cp_action>
</div>
</template>
<script>
import ../components/action //引入子组件
export default{
components:{
cp_action
},
method:{
macSelect(){
//方法体
alert(123);
}
}
}
</script>
子组件:
<template>
<div class="bet-action">
<span class="mac-select" @click="childMethod">机选</span>
</div>
</template>
<script>
export default{
methods: {
childMethod() {
console.log('请求父组件方法');
this.$emit('parentMethod'); //使用$emit()引入父组件中的方法
}
},
}
</script>
vue子组件获取父组件方法的更多相关文章
- VUE里子组件获取父组件动态变化的值
在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在 ...
- 子组件获取父组件数据 propsDown, 父组件获取子组件数据 eventUp
(一) popsDowm 三种方法获取父组件数据:被动获得(1):主动获取(2). 1.被动获得: 父组件:v-bind: 绑定变量参数和方法参数:子组件:props 接收参数.可以在模板中直接使用也 ...
- vue子组件获取父组件的数据
- vue子组件改变父组件的值
1 在父组件的coment绑定事件 <template> <div :class="classObj" class="app-wrapper" ...
- React子组件和父组件通信
React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法
父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...
- Vue 父组件主动获取子组件的值,子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
随机推荐
- java switch语句注意事项
/* switch语句的使用注意事项: 1.多个case后面的数据不可以重复 2.switch后面的小括号当中只能是下列数据类型: 基本数据类型:byte . short.char.int 引用数据类 ...
- 自从学会了 Array.reduce() ,再也离不开它
(转载)原文链接:https://juejin.im/post/5dfd9d27e51d455825129ec3 在所有后 ES6 时代的数组方法中,我觉得最难理解的就是Array.reduce( ...
- Java网络编程:什么是Socket编程?
所谓socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 我们开发的网络应用 ...
- ORACLE 11G新特性之一(增加带default的字段)
在11g之前,增加带default值的字段,实现原理如下: alter table t1 add c1 varchar2(20) default 'XX' not null; 假设t1表有4千万行数据 ...
- Docker部署Flask应用
创建应用 首先,编写一个简单的Flask应用:docker_test/flask_app.py Docker 安装 请根据自己的操作系统自行安装. Docker简介 Docker 镜像 Docker镜 ...
- Anaconda 安装 pytorch报错解决方法
一.安装Pytorch: # -c 指定用pytorch镜像源下载软件conda install pytorch torchvision cpuonly -c pytorch 报错: 二.配置: ch ...
- 每天一个linux命令:nl(12)
nl nl命令读取 file 参数(缺省情况下标准输入),计算输入中的行号,将计算过的行号写入标准输出.在输出中,nl命令根据您在命令行中指定的标志来计算左边的行.输入文本必须写在逻辑页中.每个逻辑页 ...
- 那些长短不一的PCI-E插槽都有什么不一样?
https://www.ednchina.com/news/20171121-PCI-E.html 时间:2017-11-21 目前PCI-E插槽已经成为了主板上的主力扩展插槽,除了显卡会用到P ...
- window环境mysql卸载不干净
停止MySQL服务1添加删除程序中卸载MySQL2到安装目录删除MySQL3删除:C:\Documents and Settings\All Users\Application Data\MySQL ...
- Python基础一(格式化输出、流程控制)
(1)格式化输出(%% 第一个% 转译) # 格式化 输入 输出 name = input("Name:") age = input("Age:") job = ...