vue在组件中使用v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component v-model="msg"></my-component>
{{msg}}
<my-counter v-model="num"></my-counter>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('my-component', {
template: '<div><input type="text" :value="currentValue" @input="handleInput"/></div>',
data: function () {
return {
// 双向绑定值
currentValue: this.value
}
},
props: ['value'],// 设置value为props属性
methods: {
handleInput(event) {
var value = event.target.value;
this.$emit('input', value);
}
}
})
Vue.component("my-counter", {
template: `<div>
<h1>{{value}}</h1>
<button @click="plus">+</button>
<button @click="minu">-</button>
</div>`,
props: {
value: Number
},
data: function() {
return {
val: this.value
}
},
methods: {
plus() {
this.val = this.val + 1
this.$emit('input', this.val)
},
minu() {
if(this.val>0){
this.val = this.val-1
this.$emit('input', this.val)
}
}
}
});
new Vue ({
el: '#app',
data: {
msg: 'hello',
num: 1
}
})
</script>
</body>
</html>
参考官方文档：http://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件
参考：http://www.cnblogs.com/bldf/p/6645225.html
vue在组件中使用v-model的更多相关文章
- vue自定义组件中的v-model简单解释
在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...
- Vue自定义组件中Props中接收数组或对象
原文:https://www.jianshu.com/p/904551dc6c15 自定义弹框组件时,需要在弹框内展示商品list,所以需要组件中的对应字段接收一个Array数组,默认返回空数组[], ...
- [Vuejs] 在vue各个组件中应用全局scss变量
需要安装一个插件:sass-resources-loader 1.执行安装命令: npm i sass-resources-loader --save-dev 2.修改vue-cli环境下build文 ...
- Vue.js 组件中data的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue父组件中调用子组件的方法
Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...
- vue 父组件中调用子组件函数
2019/06/06 在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: u ...
- vue父组件中获取子组件中的数据
<FormItem label="上传头像" prop="image"> <uploadImg :width="150" ...
- vue 父组件中的数据如何传递给子组件
父组件:<template> <div id="app"> <img src="./assets/logo.png"> &l ...
- vue父组件中修改子组件样式
1. 使用全局样式 <style> /* 全局样式 */ </style> <style scoped> /* 本地样式 */ </style> 2. ...
随机推荐
- servlet3.0以后可以不用web.xml配置了
AbstractDispatcherServletInitializer 注意:删除了web.xml会报错,web.xml is missing and <failOnMissingWebXml ...
- 套接字之recvmsg系统调用
recvmsg系统调用允许用户指定msghdr结构来接收数据,可以将数据接收到多个缓冲区中,并且可以接收控制信息:接收信息过程与其他接收系统调用核心一致,都是调用传输层的接收函数进行数据接收: SYS ...
- LeetCode 24. 两两交换链表中的节点（Swap Nodes in Pairs）
题目描述 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 示例: 给定 1->2->3->4, 你应该返回 2->1->4->3. 说明: 你的算法只能 ...
- SQL查询的嵌套
SQL查询过程中,可以将查询嵌套为表,嵌套时需要给每个派生出来的表一个自己的别名. 如图:
- zk 文件存储
zk 有 2 种文件,快照和事务日志,快照是某一时刻的全量数据,事务日志中记录了数据的修改事件. 快照的文件名是 snapshot.zxid,zxid 是当前最大的事务 id // org.apach ...
- 微信小程序的生命周期和APP对象的使用
1.生命周期和APP对象的使用: //app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSy ...
- three.js中物体旋转实践之房门的打开与关闭
看这篇博客,默认你已经知道了3D模型实现三维空间内旋转的实现方式(矩阵.欧拉角.四元数). ok,下面正式切入主题,房门的打开和关闭,先上图: 正如你所看到的那样,这个“房门”已经被打开了. 一.th ...
- ffi模块——node调用动态链接库(.so/.dll文件)
参考资料1:[https://www.npmjs.com/package/ffi] 参考资料2:[http://imweb.io/topic/57732fbef0a5487b05f325bf] 参考资 ...
- 【HANA系列】SAP HANA SLT在表中隐藏字段并传入HANA的方法
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SLT在表中隐 ...
- Unity中的动画系统和Timeline(3) 混合树和动画匹配
混合树 前面我们通过在Animation界面添加单独的动作来控制动画,这样做比较麻烦,每个单独的属性,比如站立,奔跑等,都需要单独的代码来控制.现在我们可以通过使用混合树,其基本思想是将相近的动画混合 ...