组件上使用v-model

<input v-model="searchText">

等价于

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

当用在组件上时,v-model则会这样:

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

等同于

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

为了让它正常工作,这个组件内的<input>必须:

  • 将其 value 特性绑定到一个名叫valueprop
  • 在其 input 事件被触发时,将新的值通过自定义的input事件抛出
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})

现在v-model就应该可以在这个组件上完美地工作起来了:

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

示例

父组件App.vue中

<template>
<div id="app">
<Model v-model="searchText"></Model>
<span>{{searchText}}</span>
<!-- 等价于
<custom-input
v-bind:value="searchText"
@input="searchText = $event"
></custom-input> -->
</div>
</template>
<script>
import Model from "./components/Model"; export default {
name: "App",
data: function() {
return {
searchText:''
};
},
components: {
Model
}
};
</script>

子组件model.vue

<template>
<div id="app">
<input v-bind:value="value" @input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
props: ["value"], };
</script>

过程:

1.输入文字

2.:value='search' 传给子组件

3.子组件props接收

4.子组件:value='value'

5.子组件绑定input通过$emit传给父组件

6.父组件@input='searchText = $event'接收

组件上使用v-model的更多相关文章

  1. vue 学习六 在组件上使用v-model

    其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...

  2. 使用commons-fileUpload组件上传文件

    在近期的一个项目中有用到commons-fileUpload组件进行实现文件上传的功能(由于没用到框架),在使用的过程中有遇到一些问题,经过自己的琢磨也算顺利地将其解决了,在这里做个记录. 一.com ...

  3. asp 文件上传(ASPUpload组件上传)

    要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload   要实现该功能,就要利用一些特制的文件上传组件 ...

  4. EasyUI 关于IE使用window组件上传文件

    有时候IE会对使用window组件上传文件(第二次)不生效,解决方案是: 将该window每次打开的时候,使用: $('#adUploadWindow').window('refresh', 'pan ...

  5. 前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切

    之前一直使用python的PIL自定义裁切图片,今天有需求需要做一个前端的选择预览页面,索性就把这个功能整理一下,分享给大家. 实现思路: 1.前端页面: 用户选择本地一张图片,然后通过鼠标缩放和移动 ...

  6. django Form组件 上传文件

    上传文件 注意:FORM表单提交文件要有一个参数enctype="multipart/form-data" 普通上传: urls: url(r'^f1/',views.f1), u ...

  7. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  8. vue2进阶之v-model在组件上的使用

    v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但是 Vue 是单项数据流,v-model 只是语法糖而已: <in ...

  9. C后端设计开发 - 第6章-武技-常见组件上三路

    正文 第6章-武技-常见组件上三路 后记 如果有错误, 欢迎指正. 有好的补充, 和疑问欢迎交流, 一块提高. 在此谢谢大家了.

随机推荐

  1. C++ atof 函数

    腾讯云:https://cloud.tencent.com/developer/article/1391966 atof函数: 功能:将字串转换成浮点型数 相关函数 atoi,atol,strtod, ...

  2. JS数组常见方法的深浅拷贝分类

    一.涉及浅拷贝类方法,会改变原数组 1,pop():   删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值.如果数组已经为空,则 pop() 不 改变数组,并返 ...

  3. windows中kill端口为8080的进程(或子进程)

    1.netstat -aon|findstr "8080" 查出8080端口被9436进程占用 2.查看PID对应的进程 tasklist|findstr "9436&q ...

  4. Kotlin数据类型 Unit、Nothing与Nothing?、Any与Any?

    Kotlin数据类型 Unit.Nothing与Nothing?.Any与Any?   本文链接:https://blog.csdn.net/ldxlz224/article/details/9440 ...

  5. Vscode 调试 Flutter 项目

    1.Vscode 中打开 flutter 项目进行开发 2.运行 Flutter 项目 flutter run r 键:点击后热加载,也就算是重新加载吧. p 键:显示网格,这个可以很好的掌握布局情况 ...

  6. Spark ML 中 VectorIndexer, StringIndexer等用法(转载)

    VectorIndexer 主要作用:提高决策树或随机森林等ML方法的分类效果.VectorIndexer是对数据集特征向量中的类别(离散值)特征(index categorical features ...

  7. oracle存储过程中%type的含义

    转: oracle存储过程中%type的含义 2018-11-07 11:43:56 lizhi_ma 阅读数 1361更多 分类专栏: 数据库   版权声明:本文为博主原创文章,遵循CC 4.0 B ...

  8. 【Leetcode_easy】1025. Divisor Game

    problem 1025. Divisor Game 参考 1. Leetcode_easy_1025. Divisor Game; 完

  9. nodejs应用转换png,jpg,gif为webp图片格式

    本博客列表缩略图在支持webp格式的浏览器下,使用的是webp格式图片,不支持webp图片下使用的是原图片(如png,gif,jpg等) webp使用指南,请参考 https://www.imqian ...

  10. 【ARTS】01_47_左耳听风-201900930~201901006

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...