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. 第13组_16通信3班_045_OSPFv3作业

    IPv6 路由-OSPFv3 实验目的   1. 掌握 OSPFv3 的配置方法 2. 掌握在帧中继环境下 OSPFv3 的配置方法 3. 掌握 OSPFv3 NSSA 的配置方法 4. 学会查看 O ...

  2. Oracle nal() 和count(*)的注意点

    select count(*) into fhave from tab_ppxuser where name = userstr;和select nvl(hphotourl, '0') into ph ...

  3. Linux编程 16 文件权限(组管理 groupadd, groupmod,文件权限介绍)

    一.用户组 前面章节知道用户账户在控制单个用户安全性方面很好,但涉及到共享资源或把用户类型分组时,组概念就出来了. 组权限允许多个用户对系统中的对象(比如文件,目录,设备等)共享一组共用的权限. 在c ...

  4. mysql的"双1设置"-数据安全的关键参数(案例分享)

    mysql的"双1验证"指的是innodb_flush_log_at_trx_commit和sync_binlog两个参数设置,这两个是是控制MySQL 磁盘写入策略以及数据安全性 ...

  5. Apache Solr 实现去掉重复的搜索结果

    https://lucene.apache.org/solr/guide/7_2/collapse-and-expand-results.html#collapsing-query-parser 对应 ...

  6. C# 通过java生成的RSA公钥加密和解密

    最近工作需要将对方公司生成的RSA加密公钥进行明文加密和解密,发现了几点贴出来做个笔记. RSA单次加密是有长度限制!微软封装的加密方法如果出现长度超出指定范围的话报错是直接报“该项不适于在指定状态下 ...

  7. Maven json-lib依赖下载不下来解决方案

    今天Maven添加依赖时候发现json lib这个包引入之后,死活出不来JSONObject这个类,打开Maven Project视图,发现json-lib这个包没下下来,以前也遇到过类似问题,都是网 ...

  8. 教你如何在React及Redux项目中进行服务端渲染

    服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...

  9. ZooKeeper 初体验

    安装Zookeeper Mac OS Mac 用户可以使用 Homebrew 安装和管理 Zookeeper 服务: brew install zookeeper 配置文件地址在: /usr/loca ...

  10. 巨杉数据库完成C轮数千万美元融资

    业界领先的金融级分布式数据库公司,巨杉数据库近日宣布完成由嘉实投资领投的C轮融资.本轮的领投方为嘉实投资,启明创投与DCM作为早期投资方跟投. SequoiaDB巨杉数据库成立6年来一直坚持技术驱动产 ...