vue 中v-model在组件上的使用

目的:直接在自定义组件上实现v-model

vue官网介绍了一种实现方式
一个简单的vue自定义组件
代码如下
原理是将 v-model的语法糖拆成两个部分
将组件内部input的 value值 v-bind为该自定义组件的props
v-on绑定input事件 同时利用事件对象和$emit发射器再将value值发射出去
完成啦0.0

<template>
    <div class="mui-input">
      <input 
      type="type" 
      :value="value" 
      @input="$emit('input', $event.target.value)"
      :clearable="clearable"
      />
    </div>
</template>
<script>
  export  default {
      data(){
        return{

        }
      },
    props:{
        //input输入框的输入类型
        type:{
          default:"text"
        },
        //input输入框是不是可以清除
        clearable:{
          default:true
        },
        value:""
    }
  }
</script>
<style scoped lang="postcss">

</style>

在页面中的使用方式

<template>
<div>
  <mui-input v-model="xx"></mui-input>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      xx:""
    }
  }
}
</script>
分类: vue

发表评论

电子邮件地址不会被公开。