<div id="app">
<!-- 父组件通过属性的方式向子组件传值 -->
<!-- 子组件通过事件的方式向父组件传值 -->
<!-- 子组件的change事件是自定义事件 可以自子取名 -->
<counter :count="0" @change="handleChange"></counter>
<counter :count="1" @change="handleChange"></counter>
<div >{{total}}</div>
</div>
<script>
var counter ={
props:['count'],
data(){
return{
number:this.count //将父组件的值用number保存
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods: {
handleClick(){
console.log( this.number++)
// 单向数据流 子组件不能直接操作父组件的数据 会报警告
this.$emit("change",1)
}
},
}
var vm = new Vue({
el: "#app",
components:{
counter:counter
},
data: {
total:1
},
methods: {
handleChange(step){
this.total+=step
}
},
})
</script>