uni-app 父组件引用子组件时怎么调用子组件的方法

1.写一个简单的子组件main/index.vue:

<template>
    <view></view>
</template>

<script>
    export default {
        data(){
            return {}
        },
        methods:{
            childMethod() {
                console.log(‘childMethod do...‘)
            }
        }
    }
</script>

<style>
</style>

在子组件中有一个childMethod方法

2.在父组件中引用这个子组件的childMethod方法:

<template>
    <view class="content">
        <mian-index ref="mainindex"></mian-index>
    </view>
</template>
<script>
    import mainindex from ‘@/pages/main/index/index.vue‘
    export default {
        data() {
            return {

            };
        },
        components:{
            ‘mian-index‘:mainindex
        },
        onLoad(e) {
            this.$refs.mainindex.childMethod();
        }
    }
</script>

<style>
</style>

说明:

首先,引入子组件文件,然后用ref给子组件一个id标识,然后通过this.$refs.mainindex.childMethod();调用子组件方法

参考链接:https://www.cnblogs.com/wangxiaoling/p/10250903.html

原文地址:https://www.cnblogs.com/cap-rq/p/11026881.html

时间: 2024-09-29 21:40:12

uni-app 父组件引用子组件时怎么调用子组件的方法的相关文章

EXT--当defaultType与items的子组件默认xtype冲突时items的子组件的xtype为panel

示例图 直接看下面示例代码: /** * 获取导入表单 * @returns {Ext.FormPanel} */ function getImportForm() { return new Ext.FormPanel({ //... defaults : { labelWidth : 70, labelAlign : 'right', defaultType : 'textfield'//子组件的默认类型 }, items : [{//xtype为panel(默认) columnWidth :

VS2015--在 Visual Studio 中调试时映射调用堆栈上的方法

https://msdn.microsoft.com/zh-cn/library/dn194476.aspx 在 Visual Studio 中调试时映射调用堆栈上的方法 创建代码图,以便在调试时对调用堆栈进行可视化跟踪.你可以在图中进行标注以跟踪代码执行的操作,以便专注于查找 Bug. 生成调用堆栈图 1 开始调试.(键盘:"F5") 2 在你的应用进入中断模式或你单步执行某一函数之后,请选择"代码图".(键盘:Ctrl + Shift + `) 当前的调用堆栈在

使用Mac App Store更新、下载软件时出现未知错误的解决方法

很多果迷在使用 Mac App Store 更新/下载软件时,可能都曾被”未知错误”困扰过,怎么解决也不行.然而,过一段时间不知道做了什么又自己好了.今天我们提供两个解决这个问题的方法,下次遇到这个问题你可以先尝试一下. 1.首先确认在 Mac App Store 和 iTunes 中登录的是相同的 Apple ID 账号.有些果迷可能有两个或者多个 Apple ID,比如家人朋友的.比如自己一个中国区账号,一个美区账号等等.如果 iTunes 和 Mac App Store 不是登录相同的 A

关于引用WebLogic.jar时遇到NoClassDefFoundError问题的解决方法

前段时间在做一个项目开发时,需要用到weblogic.jndi.WLInitialContextFactory,所以按照以前的经验,将WebLogic.jar添加到Build Path中.可是在执行时发现报错: Exception in thread "main" java.lang.NoClassDefFoundError: weblogic/security/subject/AbstractSubject 如果将wlclient.jar也添加到路径时,会报错: Exception

vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/

安卓开发复习笔记——Menu菜单组件(选项菜单,上下文菜单,子菜单)

菜单是用户界面中最常见的元素之一,使用非常频繁,在Android中,菜单被分为如下三种,选项菜单(OptionsMenu).上下文菜单(ContextMenu)和子菜单(SubMenu). 菜单的实现方式有2种:一种是通过布局文件xml生成菜单,另一种是通过代码生成. 三种菜单内容有点多,不过大体相似,一次性讲完吧,本人偏好代码动态生成,下面就以代码为例. 1.选项菜单(OptionsMenu) 先来看下选项菜单的效果图:   在一个Activity界面中点击手机Menu键,在屏幕下方弹出的菜单

uni.app实践---微信公众号h5开发记实-----第一篇

介绍:==uni-app== 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可编译到iOS.Android.H5.以及各种小程序(微信/阿里/百度/头条/QQ)等多个平台. uni-app官网:传送门 uni-app插件市场:传送门 前一段时间因为个人了解到这个比较nb的多端开发框架,所以有兴趣自己去尝试了一下,从开始的搭建项目到微信公众号h5的登录-->微信支付都尝试了一遍.第一次尝试也踩了很多的坑.相信有很多小伙伴也遇到过这样的疑惑和问题.(大神略过),所以在这里写下

vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> <child v-bind:my-message="parentMsg"></child>//注意传递参数时要用-代替驼峰命名,HTML不区分大小写 </div> 子组件: Vue.component('child', { // camelCase in Ja

父组件中调用子组件的方法和属性

方案:利用ref属性可以获取到dom元素或者是子组件,从而可以调用子组件的方法(注意2.0版本用ref取代了el) 1.当ref直接定义在dom元素上时,则通过this.$refs.name可以获取到dom,对dom进行原生的操作 <div class="foods-wrapper" ref="foods-wrapper"> 通过this.$refs获取到dom进行操作(注意ref属性的命名不能用驼峰,同时获取的时候也不能用) let menuList