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 子组件如何调用父组件的方法的更多相关文章

  1. vue:子组件通过调用父组件的方法的方式传参

    在本案例中,由于子组件通过调用父组件的方法的方式传参,从而实现修改父组件data中的对象,所以需要啊使用$forceUpdate()进行强制刷新 父组件: provide() { return { s ...

  2. vue中子组件需调用父组件通过异步获取的数据

    原因:子组件需要调用父组件传过来的数据,如果这个数据是异步从接口里取的,那这个组件在任何生命周期里都取不到,而应该在接口调取后取到. 需要在msg拿到值后才调用组件,然后你在生命周期created里面 ...

  3. 【转】C# 子窗体如何调用父窗体的方法

    网络上有几种方法,先总结如下: 调用窗体(父):FormFather,被调用窗体(子):FormSub. 方法1: 所有权法       //FormFather:        //需要有一个公共的 ...

  4. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  5. react 中子组件调用父组件的方法

    1.在父组件中定义方法,并绑定在子组件上 // 在子组件中调用父组件中的方法 import React,{Component} from 'react'; import Child from './c ...

  6. Vue 子组件调用父组件 $emit

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

  7. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  8. Vue 子组件调用父组件方法

    父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...

  9. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

随机推荐

  1. 使用以下映射将包含A-ZIS的字母的消息编码为数字:'A' - > 1,'B' - > 2 ...'Z' - > 26 给定包含数字的编码消息,确定解码方式的总数(python)(原创)

    题目:有一种将字母编码成数字的方式:'a'->1, 'b->2', ... , 'z->26'.现在给一串数字,给出有多少种可能的译码结果. 实现逻辑: 1,使用队列的数据类型,每一 ...

  2. Android--UI之TextView

    前言 开门见山,这一篇博客主要讲一下在Android开发中,UI控件TextView的一些使用方式,并且通过四个例子实现一般项目中需要的效果来讲解TextView的使用.并且在之后的一段时间之内,都会 ...

  3. spark最新源码下载并导入到开发环境下助推高质量代码(Scala IDEA for Eclipse和IntelliJ IDEA皆适用)(以spark2.2.0源码包为例)(图文详解)

    不多说,直接上干货! 前言   其实啊,无论你是初学者还是具备了有一定spark编程经验,都需要对spark源码足够重视起来. 本人,肺腑之己见,想要成为大数据的大牛和顶尖专家,多结合源码和操练编程. ...

  4. 不得不提的volatile及指令重排序(happen-before)

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...

  5. TCP/IP 笔记 - TCP保活机制

    TCP协议中不存在轮询机制,这意味着加入启动一个客户端进程,与服务器建立连接后,然后离开几小时.几天.甚至几个月,连接依然会保持着.理论上,中间路由器可以崩溃和重启,数据线可以断开再连接,只要连接两端 ...

  6. [NewLife.XCode]事务处理(算准你的每一分钱)

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netstandard,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示 ...

  7. SharePoint如何配置Ipad跳转等问题

    如何配置Ipad跳转 Apple iPad 设备上不支持 SharePoint 标准视图.用户可以改用移动视图在 iPad 设备上查看 SharePoint 内容.默认情况下,iPad 用户被重定向到 ...

  8. 翻译:group_concat()函数(已提交到MariaDB官方手册)

    本文为mariadb官方手册:group_concat()函数的译文. 原文:https://mariadb.com/kb/en/group_concat/ 我提交到MariaDB官方手册的译文:ht ...

  9. 基于SpringMVC+Spring+MyBatis实现秒杀系统【客户端交互】

    前言 该篇主要实现客户端和服务的交互.在第一篇概况里我已经贴出了业务场景的交互图片. 客户端交互主要放在seckill.js里来实现.页面展现基于jsp+jstl来实现. 准备工作 1.配置web.x ...

  10. 学会这个删库再也不用跑路了~ --技术流ken

    前言 相信每一个学IT的人或多或少都听说过从删库到跑路这个梗~下图也是在各种交流群屡禁不止,新人听着也是瑟瑟发抖. 人们茶余饭后,街头巷角难免要问... 下面技术流ken就教给各位新手们一招删库再也不 ...