在组件上使用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

    组件上使用v-model 等价于 当用在组件上时,v-model 则会这样: 等同于 为了让它正常工作,这个组件内...

  • v-model与.sync

    在组件上使用v-model v-model的原理v-model其实只是语法糖,当我们在input标签内写上v-mo...

  • 《Vue.js实战》学习笔记(使用 v-model)

    Vue.js实战 使用 v-model 可以在自定义组件上使用 v-model 指令。 上面的例子可以使用自定义事...

  • VUE2.x已是单项绑定2018-11-02

    普通使用v-model 等价于: 当用在组件上时,v-model 则会这样: 为了让它正常工作,这个组件内的 ...

  • v-model在组件上使用

    自定义事件也可以用于创建支持 v-model 的自定义输入组件。 常见的v-model的用法 我们常用的v-mod...

  • 在组件上使用v-model

    基础 等价于: 其中$event.target.value表示获取输入框的值。 将其使用在组件上时 其中$even...

  • 在组件上使用 v-model

    需求:我们经常封装组件,需要v-model 绑定,特别是表单自定义控件的时候,做检验的时候特别需要 子组件用upd...

  • Vue中给子组件绑定v-model🚀

    父组件使用子组件时,使用v-model指令,在子组件中使用value获取props的值 父组件 子组件

  • Vue3 v-model 语法糖

    v-model的本质是属性绑定和事件绑定的结合,可以在标签上使用也可以在组件上使用 Vue2中v-model vu...

  • vue父子组件传值-06-03

    自定义组件:父组件中使用v-model将值传入子组件,并且子组件也能将值传回父组件,v-model是双向传递。 而...

网友评论

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

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