Vue有一个单项数据流的概念，我们不能对父组件传递过来的属性直接修改，因为一个父组件可能会有多个子组件，这个属性也有很多个子组件在使用，这个子组件修改了会影响另一个子组件。那么我们就是需要对传递过来的属性值进行修改该怎么办呢？我们可以在子组件的data里面定义一个等于它的变量，然后对这个变量进行一系列操作，下面的这些代码也是实现了一个简单的计数器的功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>certificate</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<counter :count='5' @increase='handleIncrease'></counter>
<counter :count='2' @increase='handleIncrease'></counter>
{{total}}
</div>
<script>
//定义vue局部组件
var counter={
props:['count'],
template:'<div @click="handleClick">{{number}}</div>',
data:function(){
return{
number:this.count
}
},
methods:{
handleClick:function(){
this.number=this.number+2;
this.$emit('increase',2)
}
}
}
var vm=new Vue({
el:"#root",
components:{
counter:counter
},
data:{
total:5
},
methods:{
handleIncrease:function(step){
this.total+=step;
}
}
})
</script>
</body>
</html>
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
