vue.js 23
<html>
<head>
<title>
test23
</title>
</head>
<body>
<div id="app">
<counter :initial-counter="counter"></counter>
<checkbox></checkbox>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('counter',{
props:['initialCounter'],
template:'<button @click = "addCounter">{{counter}}</button>',
data:function(){
return {counter:this.initialCounter};
},
methods:{
addCounter:function(){
this.counter +=1;
if(this.counter >= 5){
bus.$emit('checked', true);
}
}
}
});
Vue.component('checkbox',{
template:'<input type="checkbox" :checked="checked" value="hello, Vue" disabled>',
data:function(){
return{checked:false}
},
mounted:function(){
bus.$on('checked', function(value){
this.checked = value;
}.bind(this))
}
})
var bus = new Vue();
new Vue({
el:'#app',
data:{
counter:0
}
})
</script>
</body>
</html>
댓글
댓글 쓰기