在vue2中如何实现v-model示例

2023-06-01 00:00:00 如何实现 vue2

vue2.0 + v-model代码示例

父组件:

<template>
  <div id="app">
    {{username}} <br/>
    <my-input type="text" v-model="username"></my-input>
  </div>
</template>
<script>
import myinput from './components/myinput'
export default {
  name: 'App',
  components:{
      myinput
  },
  data(){
    return {
      username:''
    }
  }
}
</script>


子组件:

<template>
    <div class="my-input">
        <input type="text" class="my-input__inner" @input="handleInput"/>
    </div>
</template>
<script>
    export default {
        name: "myinput",
        props:{
            value:{ //获取父组件的数据value
                type:String,
                default:''
            }
        },
        methods:{
            handleInput(e){
                this.$emit('input',e.target.value) //触发父组件的input事件
            }
        }
    }
</script>

相关文章