前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uniapp调用组件方法记录

uniapp调用组件方法记录

作者头像
听着music睡
发布2022-05-07 19:16:04
7410
发布2022-05-07 19:16:04
举报
文章被收录于专栏:Android干货Android干货

官方文档

代码语言:javascript
复制
<!-- base-input子组件页面 -->
<template>
    <view>
        <input :focus="isFocus" type="text" placeholder="请输入内容" />
    </view>
</template>
<script>
    export default {
        name:"base-input",
        data() {
            return {
                "isFocus":false
            };
        },
        methods:{
            focus(){
                this.isFocus = true
            }
        }
    }
</script>
代码语言:javascript
复制
<!-- index 父组件页面 -->
<template>
    <view>
        <base-input ref="usernameInput"></base-input>
        <button type="default" @click="getFocus">获取焦点</button> 
    </view>
</template>
<script>
    export default {
        methods:{
            getFocus(){
                //通过组件定义的ref调用focus方法
                this.$refs.usernameInput.focus()
            }
        }
    }
</script>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-04-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档