uniapp调用组件方法记录

官方文档

代码语言：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>

官方文档

0 人点赞