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. JAVA基础-输入输出流

    一,File类:文件的创建和删除 1.File(String pathname):pathname是指路径名称.用法 File file = new File("d:/1.txt " ...

  2. eos开发(二)使用cleos命令行客户端操作EOS(钱包wallet基础操作)

    不知道下边这一段英文你们是不是能看懂,如果看不懂那就算了,我就是转过来随便看看的. 总之你记住nodeos.cleos和keosd这三个工程十分重要就行了,回头咱们的研究都从这三个工程杀进去. EOS ...

  3. 【jQuery】(2)---Jquery过滤选择器

                         1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...

  4. nginx入门教程

    nginx入门教程 一.概述    什么是nginx?   Nginx (engine x) 是一款轻量级的Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器.   什么是反向 ...

  5. 源码安装ELK-5.6.10版本

    目录: 一.介绍 二.安装JDK 三.安装Elasticsearch 四.安装Kibana 五.安装Nginx 六.安装Logstash 七.安装Logstash-forwarder 八.测试 系统环 ...

  6. iOS逆向开发(3):锁定APP的目标类与函数 | reveal | lldb | debugserver | 远程调试

    之前介绍了怎么获取APP的所有类的结构信息,这个有什么用呢?用处大了,比如以这一步为基础,下一步通过注入来做更多研究工作. 注入的最小单位是函数,实际上,编译执行的程序在编译后,类就不复存在了,留下来 ...

  7. Integer判等的陷阱:你知道Integer内部高速缓冲区IntegerCache吗?

    https://blog.csdn.net/magician_Code/article/details/51469101 我们先来看看下面代码的运行情况: public static void mai ...

  8. noteless的博客导航页 所有文章的导航页面

    导航  <spring springmvc mybatis maven 项目整合示例系列-导航页> <JAVA 基础知识点拾遗系列 JAVA学习 -1层  导航页> <计 ...

  9. vue项目全局引入vue-awesome-swiper插件做出轮播效果

    在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...

  10. git获取远程服务器的指定分支

    昨天糗大了...进入新公司,公司服务器上有Online为线上版本,开发版本默认的为Master,本地clone的开发版为master,公司用的git 自动部署(puh后服务器自动更新了代码...这个有 ...