Vue在组件上使用v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

<input v-model="searchText">

等价于：

<input:value="searchText"@input="searchText = $event.target.value"
>

当用在组件上时，v-model 则会这样：

<custom-input:value="searchText"@input="searchText = $event"
></custom-input>

上面用 $event 接收子组件用 $emit() 向上传递过来的数据

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

将其 value attribute 绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

写成代码之后是这样的：

Vue.component('custom-input', {props: ['value'],template: `<input:value="value"@input="$emit('input', $event.target.value)">`
})

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

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

以下是更简化代码，我发现不用写 :value这个属性也能正常的实现数据的双向绑定

<div id="app"><input-com v-model="username"></input-com><h1>{{ username }}</h1>
</div>

Vue.component("input-com",{// 当用户输入数据的时候把value值传递给父组件template: `<input @input="$emit('input',$event.target.value)" />`,
})
var app = new Vue({el: "#app",data: {username: ""}
})

Vue在组件上使用v-model相关推荐

antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
vue vuex 挂载_vue.js,javascript_Vuex的初始化失败，一直显示没有挂载到根组件上，奇怪了！，vue.js,javascript - phpStudy...
Vuex的初始化失败,一直显示没有挂载到根组件上,奇怪了! 代码如下 import 'babel-polyfill' import Vue from 'vue' import VueRouter fr ...
grep v grep_使用grep4j轻松测试分布式组件上的SLA
grep v grep 因此,您的分布式体系结构如下图所示,您刚刚从企业那里收到了一项要求,以确保生产者发送并随后传输到下游系统(消费者)的消息的SLA必须快且永远不会慢于此. 400毫秒. 要求说: ...
Vue上传文件 iview Upload UI 组件上传组件
Vue上传文件 input支持上传文件定义type类型,隐藏样式第三定义change事件拿到file 的相关信息,accept限制支持的文件类型然后给button增加点击事件 template部 ...
Vue自定义组件npm上传私服，且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用安装镜像源管理工具nrm 发布自定义组件到公司私服若未下载nrm源管理工具直接使用npm设置私服地址也可以以下步骤都是基于npm命令从私服下 ...
Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)／前端知识
文章目录使用意义基础使用给组件添加属性传递事件自定义组件的v-model 剖析v-model原理使用示例插槽使用意义有时候一组HTML代码可能会在多出使用(比如页眉页脚).如果我们把 ...
vue 自定义组件v-model
官网的话: 允许一个自定义组件在使用 v-model 时定制 prop 和 event.默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event, ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...

Vue在组件上使用v-model

Vue在组件上使用v-model

Vue在组件上使用v-model相关推荐

最新文章

热门文章