uni-app 子组件如何调用父组件的方法
1.在父组件methods中定义一个方法:
changeType:function(type){
this.typeActive = type;
alert(type);
}
2.在父组件引用子组件时绑定该方法:
<cate-top :catelist="catelist" v-on:pChangeType="changeType"></cate-top>
3.在子组件中绑定点击事件:
<template name="cate-top">
<view class="activity-cover">
<view class="up-mode">
<view class="li" v-for="(item,index) in types" :key="index" @tap="changeType(item.cate)">
<text>{{item.name}}</text>
</view>
</view>
</view>
</template>
点击事件为
@tap="changeType(item.cate)"
4.在子组件 methods 中点击事件中,使用 $emit 调用父组件的changeType()方法:
changeType:function(type){
this.$emit("pChangeType")
},
传参数:
changeType:function(type){
this.$emit("pChangeType",type)
},
子组件中第一个参数是父组件中调用子组件并传递方法需要绑定的方法名,第二个参数是需要传递的参数。
转载时请注明出处及相应链接,本文永久地址:https://www.cnblogs.com/wangxiaoling/p/10155056.html,谢谢!
uni-app 子组件如何调用父组件的方法的更多相关文章
- vue:子组件通过调用父组件的方法的方式传参
在本案例中,由于子组件通过调用父组件的方法的方式传参,从而实现修改父组件data中的对象,所以需要啊使用$forceUpdate()进行强制刷新 父组件: provide() { return { s ...
- vue中子组件需调用父组件通过异步获取的数据
原因:子组件需要调用父组件传过来的数据,如果这个数据是异步从接口里取的,那这个组件在任何生命周期里都取不到,而应该在接口调取后取到. 需要在msg拿到值后才调用组件,然后你在生命周期created里面 ...
- 【转】C# 子窗体如何调用父窗体的方法
网络上有几种方法,先总结如下: 调用窗体(父):FormFather,被调用窗体(子):FormSub. 方法1: 所有权法 //FormFather: //需要有一个公共的 ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- react 中子组件调用父组件的方法
1.在父组件中定义方法,并绑定在子组件上 // 在子组件中调用父组件中的方法 import React,{Component} from 'react'; import Child from './c ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- Vue 子组件调用父组件方法
父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
随机推荐
- 3-7 Vue中的列表渲染
举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...
- parseInt和map方法使用案例分析
["1","2","3"].map(parseInt) //[1,NaN,NaN] 先看map()方法 定义和用法 map() 方法返回一个 ...
- asp.net MVC 5 路由 Routing
ASP.NET MVC ,一个适用于WEB应用程序的经典模型 model-view-controller 模式.相对于web forms一个单一的整块,asp.net mvc是由连接在一起的各种代码层 ...
- TCP/IP 笔记 - 安全
安全:可扩展身份认证协议.IP安全协议.传输层安全.DNS安全.域名密钥识别邮件 任何由用户或以用户账号执行却违背了用户本身意愿的软件被称为恶意软件 网络安全是一门十分广泛及有深度的学识,而本书旨在了 ...
- 11 使用Tensorboard显示图片
首先,下载一张png格式的图片(注意:只支持png格式),命名为1.png.然后,打开PythonShell,输入以下代码: import tensorflow as tf # 获取图片数据 file ...
- 微信分享JS-SDK
微信JS-SDK,提供给开发者的基于微信内的网页开发工具包 使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微 ...
- 深入理解Java虚拟机阅读心得(一)
JVM(Java Virtual Machine) 即Java虚拟机,是一种用于计算设备的规范,用于运行Java程序编译后得到的字节码文件(Class文件) 一.JVM的内存区域 1.程序计数器(Pr ...
- JavaScript 系列博客(五)
JavaScript 系列博客(五) 前言 本篇博客学习 js 选择器来控制 css 和 html.使用事件(钩子函数)来处理事件完成后完成指定功能以及js 事件控制页面内容. js 选择器 在学习 ...
- [Linux] deepin15.8搭建LNMP环境
LAMP和LNMP LAMP==Linux+Apache+Mysql+PHP LNMP==Linux+Nginx+Mysql+PHP 安装nginx sudo apt install nginx 安装 ...
- 重装系统之 Win10 镜像安装
首先配置武器的第一步是要选择武器的性质,以前win10 刚出的时候有很多问题,导致大家都不太喜欢用,但是现在Win10 经过一系列的优化,已经相当稳定靠谱,但是网上很多重装系统的教程参差不齐,导致博主 ...