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"],//接收的時(shí)候庐椒，必須是value
// template:"<button @click='add'>{{value}}</button>",
// methods:{
// add:function(){
// var num=this.value;
// num++;
// this.$emit("input",num)//監(jiān)聽的事件必須是input事件
// }
// }
// })
//當(dāng)需要綁定多個(gè)value值的時(shí)候，需要自定義一個(gè)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)//監(jiān)聽的事件必須是input事件
}
}
})
var box=new Vue({
el:"#box",
data:{
num:2
}
})
//v-model和.sync的區(qū)別
//.sync可以雙向綁定多個(gè)值，更直觀碟联，更強(qiáng)大
//v-model只能接收value的值妒御，并且監(jiān)聽input事件
</script>
</html>
