v-model双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<veb v-model="num"></veb>
</div>
</body>
<script>
// Vue.component("veb",{
// props:["value"],//接收的时候，必须是value
// template:"<button @click='add'>{{value}}</button>",
// methods:{
// add:function(){
// var num=this.value;
// num++;
// this.$emit("input",num)//监听的事件必须是input事件
// }
// }
// })
//当需要绑定多个value值的时候，需要自定义一个model属性
Vue.component("veb",{
model:{
prop:"num",
event:"b"
},
props:["num"],
template:"<button @click='add'>{{num}}</button>",
methods:{
add:function(){
var a=this.num;
a++;
this.$emit("b",a)//监听的事件必须是input事件
}
}
})
var box=new Vue({
el:"#box",
data:{
num:2
}
})
//v-model和.sync的区别
//.sync可以双向绑定多个值，更直观，更强大
//v-model只能接收value的值，并且监听input事件
</script>
</html>
网友评论