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

前端  /  管理员 发布于 2年前   459

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>