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. 课程五(Sequence Models),第三周(Sequence models & Attention mechanism) —— 1.Programming assignments:Neural Machine Translation with Attention

    Neural Machine Translation Welcome to your first programming assignment for this week! You will buil ...

  2. 【python小工具】我在bilibili个人资料里控制家里的电脑

    今天在52学习到的,大佬A是在网易云音乐   歌单设置  里,过程没看到,封装一个exe了,可以控制本地cmd命令\ 思路很奇特,想了一下感觉实现应该简单,就打算自己实现一下\ 两步走:网页正则和本地 ...

  3. HTTP的基本原理

    用户访问万维网文档,万维网文档之间的链接以及万维网文档中数据传送到用户计算机,这些功能的实现都是由超文本传输协议 HTTP(HyperTextTransfer Protocol) 负责完成的. HTT ...

  4. Consul安装使用

    安装 安装环境: Mac 我参照官网下载,然后解压,然后添加到PATH,并不能用.最终使用brew安装成功. brew install consul 安装成功后,文件位于/usr/local/Cell ...

  5. 初识MongoBD

    一.安装 我使用的系统是Ubuntu16.04,不同版本系统参照官网安装步骤.安装官网4个步骤安装好MongoDB并启动. sudo apt-key adv --keyserver hkp://key ...

  6. Mybatis的原理相关

    今天看了一篇有关Mybatis非常好的文章,顺便写了一下学习心得. 原文地址:https://blog.csdn.net/u010349169/article/details/40422941 一.M ...

  7. Perl匿名数组、hash和autovivification特性

    可有构建匿名的对象,这样就没必要去为只用一两次的数组.hash去取名字,有时候取名是很烦的事. 使用中括号[]构建匿名数组 使用大括号{}构建匿名hash 不包含任何元素的[]和{}分别是匿名空数组. ...

  8. [转]用virtualBox安装centos设置网络和通信

    本文转自:https://blog.csdn.net/hsl_1990_08_15/article/details/51644451 具体的安装和在VM Ware中安装的方式大同小异 安装好后我们设置 ...

  9. “每日一道面试题”.Net中GC的运行机制

    GC 也就是垃圾回收,经常遇到的面试题,关于GC 感觉可以写一本书,我们要做的也就是简单理解,如果有意愿,可以深入研究 所谓的垃圾回收,也就是清理回收托管堆上不再被使用的对象内存,并且移动仍在被使用的 ...

  10. SQL Server函数之空值处理

    coalesce( expression [ ,...n ] )返回其参数中第一个非空表达式. Select coalesce(null,null,'1','2') //结果为 1 coalesce( ...