首页 > 其他分享 >uniapp中父组件调用子组件的方法

uniapp中父组件调用子组件的方法

时间:2024-06-21 16:29:43浏览次数:23  
标签:uniapp 调用 methods ... eg 中父 组件 方法

1父组件


<template>
    <view>
           <!-- 子组件 -->
        <recommen ref='xText'></recommen>
        <view @click='onClick'>点击调用子组件方法</view>
    </view>
</template>

<script>
   ...
    methods: {
        onClick(){
            // 通过ref 调用子组件方法
            this.$refs.xText.eg();
        }
    }

2.子组件 recommen(recommen是子组件的名字)


<template>
    <view>
    </view>
</template>
 
 
<script>
    ...
    
    methods: {
        eg(){
            // 子组件eg方法
            console.eg('我是子组件的eg方法');
        }
    }

标签:uniapp,调用,methods,...,eg,中父,组件,方法
From: https://blog.csdn.net/m0_62058782/article/details/139797549

相关文章

  • uniapp实现简单圆形色盘、取色器、拾色器
    一、简介        使用canvas实现的简单圆形色盘,可自定义相关大小,简单移植即可使用,多平台都可使用。二、示例图    可拖拽取色三、示例代码<template> <view> <viewclass="round_picker"> <canvasclass="canvas1"canvas-id="boardcanvas"> ......
  • Vue非单文件组件
    非单文件组件......
  • 【React篇】父组件渲染时避免重复渲染子组件的3种处理方法
    在React中,父组件渲染时要避免重复渲染子组件,可以使用以下方法:使用React.memo(仅适用于函数式组件)或PureComponent(适用于类组件):这些方法可以帮助你创建在接收到新的props时仅在有必要的情况下重新渲染的组件。它们通过浅比较新旧props来判断是否需要重新渲染。对于......
  • 自定义组件获取接口数据
    <template><divclass="ting-title"><spanclass="text">{{text}}</span></div></template><script>exportdefault{name:'TingTitle',data:()=>{......
  • 鸿蒙UI开发快速入门 —— part07:组件状态管理之@Prop/@Link装饰器
    1、前言我们在上一章学习了@State装饰器,@State装饰器的作用范围仅仅在当前组件,接下来,我们讨论如何从父组件中传入参数到子组件,让子组件随着父组件的状态发生变化。本章将要介绍的就是:@Props装饰器。2、@Props装饰器@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装......
  • 微信小程序学习(七):自定义组件和通信
    1、基本知识开发中常见的组件主要分为公共组件和页面组件两种,因此注册组件的方式也分为两种:全局注册:在app.json文件中配置usingComponents节点进行引用声明,注册后可在任意组件使用局部注册:在页面.json文件中配置usingComponents节点进行引用声明,只可在当前页面......
  • React+TS前台项目实战(十四)-- 响应式头部导航+切换语言相关组件封装
    文章目录前言Header头部相关组件1.功能分析2.相关组件代码+详细注释3.使用方式4.Gif图效果展示总结前言在这篇博客中,我们将封装一个头部组件,根据不同设备类型来显示不同的导航菜单,会继续使用Reacthooks和styled-components库来构建这个组件,此外,也会实现切换......
  • 【重要公告】DevExpress地图组件 - Bing地图企业服务弃用
    DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpressDashboardeXpressApp框架、适用于VisualStudio的CodeRush等一系列辅助工具。屡获大奖的软件开发平台DevExpress近期重要版本v23.2已正式发布,该版本拥有众多新产品和数十个具有高影响力的功......
  • 深度分析:React Native、Flutter、UniApp、Taro、Vue的差异
    深度分析:ReactNative、Flutter、UniApp、Taro、VueReactNative优势:跨平台代码共享:使用JavaScript和React,可以为iOS和Android开发应用,代码复用率高。活跃社区和生态系统:React和ReactNative有庞大的社区,提供了大量的第三方库和插件。热重载:开发效率高,修改代码后几乎......
  • Chip组件的用法
    文章目录概念介绍使用方法示例代码其它类Chip我们在上一章回中介绍了SliderWidget相关的内容,本章回中将介绍如何使用ChipWidget.闲话休提,让我们一起TalkFlutter吧。概念介绍本文中提到的ChipWidget在屏幕上显示一小块区域,类似悬浮的按钮,通常在网页类操作中比......