uniapp调用组件方法记录


官方文档

<!-- 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>
<!-- 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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM