有时候，需要在父组件把数据传递给子组件，也有时候，需要把子组件的数据，传递给父组件。
这里先来研究第一个，父组件把数据传递给子组件。
这里使用props
参考vue.js官方介绍
https://cn.vuejs.org/v2/api/#props
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
父组件写一个点击事件，累计增加值。
<template>
<div>
<el-button @click="add">点击</el-button>
<label>显示父组件的值</label>
<son :i =i></son>
</div>
</template>
<script>
import son from './son'
export default {
data () {
return {
i: 0
}
},
methods: {
add () {
this.i = this.i + 1
}
},
components: {
son
}
}
</script>
子组件如下：使用props，定义一个变量
<template>
<div>
<label>1111</label>
<el-input type="text" :value="i"></el-input>
</div>
</template>
<script>
export default {
props: {
i: {
type: Number,
default: 0
}
}
}
</script>
父组件使用
<son :i =i></son>:i 的意思是绑定子组件props里面的i变量。
=i 是绑定父组件的i变量。
效果如下：
********************上面就完成了父组件传递数据给子组件*****************
下面开始新的玩法，子组件传递数据给父组件。
这里使用的方法教$emit
父组件如下：
<template>
<div>
<el-button @click="add">点击</el-button>
<label>显示父组件的值</label>
<son :i =i @sonadd="sonadd"></son>
<label>显示子组建的值</label>
<el-input type="text" :value="sonCount"></el-input>
</div>
</template>
<script>
import son from './son'
export default {
data () {
return {
i: 0,
sonCount: 250
}
},
methods: {
add () {
this.i = this.i + 1
},
sonadd (count) {
console.log('sonadd ' + count)
this.sonCount = count
}
},
components: {
son
}
}
</script>
子组件如下：
<template>
<div>
<label>1111</label>
<el-input type="text" :value="i"></el-input>
<el-button @click="add">子组件传递给父组件</el-button>
</div>
</template>
<script>
export default {
data () {
return {
count: this.i
}
},
props: {
i: {
type: Number,
default: 0
}
},
methods: {
add () {
this.count++
console.log(this.count)
this.$emit('sonadd', this.count)
}
}
}
</script>
注意事项：
子组件调用的函数名为sonadd 参数为this.count
父组件使用@sonadd 绑定子组件调用的函数，并写一个sonadd的函数来处理消息。
效果如下：
