Vue入门 Demo14 父子组件之间的值传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" />
<title>父子组件传值</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 父组件通过属性形式向子组件传值,子组件通过事件触发的形式向父组件传值 -->
<div id="app">
<!-- 父组件可以监听子组件的事件 -->
<counter :count="0" @change ="handlerChange"></counter>
<counter :count="1" @change ="handlerChange"></counter>
<div>{{total}}</div>
</div>
<script>
var counter = {
template: '<div @click="handleClick">{{number}}</div>',
props: ['count'],
data: function(){
return {
number: this.count,
}
},
methods: {
handleClick: function(){
this.number++,
this.$emit('change',1)
}
}
};
var vm = new Vue({
el: "#app",
data: {
total: 1,
},
components: {
counter: counter,
},
methods:{
handlerChange: function(step){
this.total += step;
}
}
})
</script>
</body>
</html>
