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>