<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件传值</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!--加上冒号是让"0","1"成为js表达式，不是字符串-->
<counter :count="1" @inc="handleIncrease"></counter>
<counter :count="3" @inc="handleIncrease"></counter>
<div>{{total}}</div>
</div>
<script>
var counter = {
props:['count'],
data: function(){
return{
number:this.count
}
},
template: "<div @click='handleClick'>{{number}}</div>",
methods:{
handleClick:function () {
this.number = this.number+2;
this.$emit('inc',2) //每次点击按钮都是向外触发inc事件,步长为2
}
}
};
var vm = new Vue({
el: '#root',
data:{
total:4
},
//注册子组件
components: {
counter: counter
},
methods:{
handleIncrease:function (step) {
this.total +=2
}
}
})
</script>
</body>
</html>
<!--
父组件向子组件传递数据：通过属性的形式向子组件传递数据,
父组件向子组件随意的传递参数，但是子组件不能随意修改父组件传递过来的参数(单项数据流)
解决上述问题吧办法一：在子组件中创建data对象，创建副本，返回自己的number数据，修改自己就可以了
子组件向父组件传递数据:this.$emit
-->
Vue父子组件的数据传递
猜你喜欢
转载自www.cnblogs.com/xuyxbiubiu/p/9987010.html
今日推荐
周排行