在组件上使用v-model

作者: me_coder | 来源:发表于2019-11-27 10:48 被阅读0次

    基础

    <input v-model="searchText">
    等价于:

    <input
      v-bind:value="searchText"
      v-on:input="searchText = $event.target.value"
    >
    

    其中$event.target.value表示获取输入框的值。

    将其使用在组件上时

    <custom-input
      v-bind:value="searchText"
      v-on:input="searchText = $event"
    ></custom-input>
    

    其中$event表示$emit抛出的值,即$emit的第二个参数。

    组件代码

    Vue.component('custom-input', {
      props: ['value'],
      template: ‘
        <input
          v-bind:value="value"     //"value"对应props里面的value
          v-on:input="$emit('input', $event.target.value)"
        >
      ’
    })
    

    使用方式

    <custom-input v-model="searchText"></custom-input>

    相关文章

      网友评论

        本文标题:在组件上使用v-model

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