组件上使用v-model
组件上使用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 特性绑定到一个名叫
value
的prop
上- 在其 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的更多相关文章
- vue 学习六 在组件上使用v-model
其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...
- 使用commons-fileUpload组件上传文件
在近期的一个项目中有用到commons-fileUpload组件进行实现文件上传的功能(由于没用到框架),在使用的过程中有遇到一些问题,经过自己的琢磨也算顺利地将其解决了,在这里做个记录. 一.com ...
- asp 文件上传(ASPUpload组件上传)
要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload 要实现该功能,就要利用一些特制的文件上传组件 ...
- EasyUI 关于IE使用window组件上传文件
有时候IE会对使用window组件上传文件(第二次)不生效,解决方案是: 将该window每次打开的时候,使用: $('#adUploadWindow').window('refresh', 'pan ...
- 前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切
之前一直使用python的PIL自定义裁切图片,今天有需求需要做一个前端的选择预览页面,索性就把这个功能整理一下,分享给大家. 实现思路: 1.前端页面: 用户选择本地一张图片,然后通过鼠标缩放和移动 ...
- django Form组件 上传文件
上传文件 注意:FORM表单提交文件要有一个参数enctype="multipart/form-data" 普通上传: urls: url(r'^f1/',views.f1), u ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- vue2进阶之v-model在组件上的使用
v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但是 Vue 是单项数据流,v-model 只是语法糖而已: <in ...
- C后端设计开发 - 第6章-武技-常见组件上三路
正文 第6章-武技-常见组件上三路 后记 如果有错误, 欢迎指正. 有好的补充, 和疑问欢迎交流, 一块提高. 在此谢谢大家了.
随机推荐
- C++ atof 函数
腾讯云:https://cloud.tencent.com/developer/article/1391966 atof函数: 功能:将字串转换成浮点型数 相关函数 atoi,atol,strtod, ...
- JS数组常见方法的深浅拷贝分类
一.涉及浅拷贝类方法,会改变原数组 1,pop(): 删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值.如果数组已经为空,则 pop() 不 改变数组,并返 ...
- windows中kill端口为8080的进程(或子进程)
1.netstat -aon|findstr "8080" 查出8080端口被9436进程占用 2.查看PID对应的进程 tasklist|findstr "9436&q ...
- Kotlin数据类型 Unit、Nothing与Nothing?、Any与Any?
Kotlin数据类型 Unit.Nothing与Nothing?.Any与Any? 本文链接:https://blog.csdn.net/ldxlz224/article/details/9440 ...
- Vscode 调试 Flutter 项目
1.Vscode 中打开 flutter 项目进行开发 2.运行 Flutter 项目 flutter run r 键:点击后热加载,也就算是重新加载吧. p 键:显示网格,这个可以很好的掌握布局情况 ...
- Spark ML 中 VectorIndexer, StringIndexer等用法(转载)
VectorIndexer 主要作用:提高决策树或随机森林等ML方法的分类效果.VectorIndexer是对数据集特征向量中的类别(离散值)特征(index categorical features ...
- oracle存储过程中%type的含义
转: oracle存储过程中%type的含义 2018-11-07 11:43:56 lizhi_ma 阅读数 1361更多 分类专栏: 数据库 版权声明:本文为博主原创文章,遵循CC 4.0 B ...
- 【Leetcode_easy】1025. Divisor Game
problem 1025. Divisor Game 参考 1. Leetcode_easy_1025. Divisor Game; 完
- nodejs应用转换png,jpg,gif为webp图片格式
本博客列表缩略图在支持webp格式的浏览器下,使用的是webp格式图片,不支持webp图片下使用的是原图片(如png,gif,jpg等) webp使用指南,请参考 https://www.imqian ...
- 【ARTS】01_47_左耳听风-201900930~201901006
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...