美文网首页
Vue高级特性「四」--自定义 v-model

Vue高级特性「四」--自定义 v-model

作者: loushumei | 来源:发表于2020-10-27 20:27 被阅读0次

    父组件 index.vue

    <p>{{name}}</p>
    <CustomVmodel v-model="name" />
    

    子组件 CustomVmodel.vue

    <template>
      <div>
        <input type="text"
          :value="text1"
          @input="$emit('change1',$event.target.value)"
        >
        <!-- 
          1. 上面input 使用了 :value 而不是v-model
          2. 上面的change 和 model.event 要对应起来
          3. text1属性对应起来
         -->
      </div>
    </template>
    
    <script>
    export default {
      model:{
        prop:'text1',//对应 props text
        event:'change1'
      },
      props:{
        text1:String,
        default(){
          return ''
        }
      },  
    };
    </script>
    

    相关文章

      网友评论

          本文标题:Vue高级特性「四」--自定义 v-model

          本文链接:https://www.haomeiwen.com/subject/oskamktx.html