<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<number @change="countAdd"></number>
<!-- 调用父组件的方法countAdd-->
<number @change="countAdd" ></number>
<div>父组件--<span>{{count}}</span></div>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('number',{
template:'<div>子组件<span @click="add">{{num}}</span></div>',
data:function () {
return{
num:0
}
},
methods:{
add:function () {
this.num++
this.$emit('change',this.num)
// 向外暴露一个change事件,子组件调用了这个方法
// 向父组件触发事件
}
}
})
new Vue({
el:"#app",
data:{
count:0
},
methods:{
//这里的num从组件里面的this.num来
countAdd:function (num) {
this.count+=num
}
}
})
</script>
</body>
</html>