初探 vue 2.0 自定义组件的 v-model

<template>
  <div class="home">
    <my-input :placeholder="'请输入内容'" v-model="inpval"></my-input>
    {
   
   {inpval}}
  </div>
</template>

<script>
import myInput from '../components/myInput.vue'

export default {
  name: 'Home',
  data() {
    return {
      inpval:'123'
    }
  },
  components: {
    myInput
  }
}
</script>

组件

<template>
    <div class=''>
        <input type="text" :placeholder="placeholder" @input="inp" :value="value">
    </div>
</template>

<script>
export default {
    props:{
        placeholder:String,
        value:String
    },
    data() {
        return {

        };
    },
    created() {},
    methods: {
        inp(e){
            this.$emit('input',e.target.value)
        }
    },
    components:{}
};
</script>

<style lang='scss'>

</style>

猜你喜欢

转载自blog.csdn.net/m0_63873004/article/details/123465104