Vue官方文档(24): 通过ref访问子组件实例或子元素

最新推荐文章于 2024-11-01 17:01:39 发布

amadeus_liu2

最新推荐文章于 2024-11-01 17:01:39 发布

阅读量93

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/127636549

版权

Vue 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

<template>
 <div >

  <base-input ref="usernameInput" v-model="value">
  </base-input>

  <button @click="focusInputInSubComponent">focus input in sub component</button>

 </div>


</template>


 <script>
 import Vue from 'vue'

 Vue.component('base-input', {
  data(){
    return {
      value: ''
    }
  },
  methods:{
      focus: function () {
        this.$refs.input.focus()
        }
  },
  template: `
  <input
    ref="input"
    v-bind="$attrs"
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  >
  `
})



  export default{
    components: { 

    },
    data() {
      return {
        value: 'test'              
              }
            },
                
    methods:{
      focusInputInSubComponent(){
        this.$refs.usernameInput.focus()
          }
        }

      }


    </script>

<style >
  

</style>