利用v-model实现父子组件间的双向通信
来源:互联网 发布:java ee基础实用教程 编辑:程序博客网 时间:2024/05/22 00:29
<template>
<div>
这是主页面
<h1> {{num}}</h1>
<button @click="handleMins">-1</button>
<hr>
<!--
作者:786905664@qq.com
时间:2017-09-24
描述:局部组件
-->
<com v-model="num"></com>
</div>
</template>
<script>
import son from './test1'
var com={
template:'<div>{{msg}}<button @click="handleAdd">+1</button>{{currentNum}}</div>',
data(){
return{
msg:'我是局部组件',
currentNum:this.value
}
},
props:{
value:{//这里必须是value
type:Number
}
},
methods:{
handleAdd(){
this.currentNum++;
this.$emit('input',this.currentNum)//这里必须是input
}
},
watch:{
value(val){
this.currentNum=val
}
}
}
export default {
components:{com},
data(){
return{
msg:'',
show:'',
num:0
}
},
methods:{
showson(e){
this.show=e
},
handleMins(){
this.num--
}
}
}
</script>
<div>
这是主页面
<h1> {{num}}</h1>
<button @click="handleMins">-1</button>
<hr>
<!--
作者:786905664@qq.com
时间:2017-09-24
描述:局部组件
-->
<com v-model="num"></com>
</div>
</template>
<script>
import son from './test1'
var com={
template:'<div>{{msg}}<button @click="handleAdd">+1</button>{{currentNum}}</div>',
data(){
return{
msg:'我是局部组件',
currentNum:this.value
}
},
props:{
value:{//这里必须是value
type:Number
}
},
methods:{
handleAdd(){
this.currentNum++;
this.$emit('input',this.currentNum)//这里必须是input
}
},
watch:{
value(val){
this.currentNum=val
}
}
}
export default {
components:{com},
data(){
return{
msg:'',
show:'',
num:0
}
},
methods:{
showson(e){
this.show=e
},
handleMins(){
this.num--
}
}
}
</script>
阅读全文
0 0
- 利用v-model实现父子组件间的双向通信
- vue.js学习笔记(六)--利用v-model实现父子组件间的双向通信
- 利用Vue v-model实现一个自定义的表单组件
- vue实现父子双向通信
- v-model组件理解
- 微信小程序框架wepy.js父子组件双向通信
- 利用共享存储实现父子进程间的通信
- 使用管道实现进程间的双向通信
- react父子组件间的交流
- VUE 父子组件间的通讯
- vue 父子组件间的通迅
- Vue 自定义组件使用v-model
- vue2实现父子组件的数据双向绑定
- Vue.js父子组件和非父子组件间的传值通信
- 浅谈 Vue v-model指令的实现原理
- v-model和v-bind的区别
- vue父子组件的嵌套
- angular2 父子组件的通信
- IDEA下java连接Mysql数据库
- web插入音频文件
- Android Studio 安装初次运行,Building gradle project info
- python 字符串替换
- Idea基础操作
- 利用v-model实现父子组件间的双向通信
- 贝叶斯分类
- Python中列表的append、insert、extend区别
- Unix的cat在Windows环境下的替代者:type
- 解决java.lang.IllegalStateException: Fragment already added:Fragment already added问题
- 限制VB文本框输入的代码
- Android动画总结
- ==和equanls方法
- Xshell使用技巧总结