父子组件的数据传递
2019-01-02 本文已影响6人
puxiaotaoc
1、父组件通过:count="3"的方式向子组件传递参数，且子组件不能随意修改父组件传递过来的参数，但可以对参数的复本进行修改；
2、子组件通过$emit方法向父组件传递参数，并发布一个方法；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<counter :count="3" @inc="handleIncrease"></counter>
<counter :count="2" @inc="handleIncrease"></counter>
<div>{{total}}</div>
</div>
<script>
// :count="0"，不加:传的是一个字符串
// 单向数据流:父组件可以随意的向子组件传递参数，但子组件不能随意修改父组件传递过来的参数,因为这个参数可能被多个子组件共用
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)
}
}
}
var vm = new Vue({
el: '#app',
components: {
counter: counter
},
data: {
total: 5
},
methods: {
// step是this.$emit('inc', 2)传递的第二个参数
handleIncrease: function(step) {
this.total += step
}
}
})
</script>
</body>
</html>
