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. mysql 开发基础系列12 选择合适的数据类型(上)

    一. char 与varchar比较 在上图的最后一行的值只适用在"非严格模式",关于严格模式后面讲到.在“开发基础系列4“ 中讲到CHAR 列删除了尾部的空格.由于char是固定 ...

  2. 如何一步步在生产环境上部署django和vue

    本文由云+社区发表 本文主要讲述了如何一步步在生产环境上部署django和vue,操作系统默认为centos 说明:后文中出现的以下字符串均表示具体的路径或者名称,含义如下: DJANGO_DIR-- ...

  3. Android Navigation 架构组件入门教程

    Android Navigation 架构组件入门教程 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:https://www.cnblogs.com/cavalier-/p/1 ...

  4. Python系列:二、数据类型--技术流ken

    标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Set(集合) Dictionary(字典) Python3 ...

  5. js_ajax模拟form表单提交_多文件上传_支持单个删除

    需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...

  6. C# 转换关键字 operator

    operator 使用 operator 关键字重载内置运算符,或在类或结构声明中提供用户定义的转换. 假设场景,一个Student类,有语文和数学两科成绩,Chinese Math,加减两科成绩,不 ...

  7. 行为型---状态者模式(State Pattern)

    状态者模式的介绍 每个对象都有其对应的状态,而每个状态又对应一些相应的行为,如果某个对象有多个状态时,那么就会对应很多的行为.那么对这些状态的判断和根据状态完成的行为,就会导致多重条件语句,并且如果添 ...

  8. python - unittest 单元测试学习

    单元测试 单元测试是用来对一个模块.一个函数或者一个类进行正确性检验的测试工作 比如对Python中的abs 的测试 输入正数: 比如 1, 2, 3, 返回值不变 输入负数: 比如 -1, -2, ...

  9. [PHP]算法-拼接最小字典序的实现

    拼接最小字典序: 给定一个字符串类型的数组strs,请找到一种拼接顺序,使得将所有字符串拼接起来组成的大字符串是所有可能性中字典顺序最小的并放回这个大字符串. 思路: 1.字典序,12345这五个数, ...

  10. Java实现Base64加密

    阅读本文约“2.5分钟” Java加解密系列,介绍Java加密解密的基础知识,并使用Base64算法实现加解密. 对于加密在企业中是非常常见的,就如邮件的传输,每个企业都会有自己设置安全方式,设置加密 ...