版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/soulwyb/article/details/86593025
<!DOCTYPE html>
<html>
<head>
<title>父子组件传递</title>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<!-- 演示案例大体内容是通过父组件传递给子组件初始值，然后监听子组件的数据变化 计算出和（total） -->
<div id="app">
<!-- :content是表示父组件向子组件传递数据 @change是父组件监听子组件的'change'事件 -->
<counter :content = "0" @change="handleChangeClick"></counter>
<counter :content="1" @change="handleChangeClick"></counter>
<div>{{total}}</div>
</div>
</body>
<script>
// 子组件
var counter = {
// 子组件接收父组件的数据时需要加上props：[]
props: ['content'],
// 子组件使用data函数时需要用函数返回 而不是像根组件那样直接写名称与值
// Vue是单向数据流。所以父组件可以向子组件任意传数据，但是子组件不能随便修改父组件的数据。
// 所以需要使用data函数来创建父组件数据的副本。
data: function() {
return {
number: this.content
}
},
// 通过点击事件触发handleClick函数
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick: function() {
this.number ++
// 子组件向父组件传递数据需要使用$emit()函数。函数的第一个参数是索要触发事件的名称，后面的都是索要传递的值
// 可以1个也可以多个值
this.$emit('change', 1, 2)
}
}
}
var vm = new Vue({
el:'#app',
data: {
total: 1
},
// 父组件添加子组件
components: {
counter: counter
},
methods: {
// 父组件接收子组件传递的数据在step中,几个参数传递，这里形参就设置几个
handleChangeClick: function(step, step2) {
this.total += step
console.log(step2)
}
}
})
</script>
</html>