结合上篇文章，自定义子组件的使用，来实现一个父传子的功能，功能很简单，点击父级页面按钮，将值传递给子组件中，今天小编就来聊一聊关于vue子组件传递值给父组件?接下来我们就一起去研究一下吧!
vue子组件传递值给父组件
结合上篇文章，自定义子组件的使用，来实现一个父传子的功能，功能很简单，点击父级页面按钮，将值传递给子组件中。
首先，我们在父级页面中，定义一个按钮标签（当然，父传子可以不需要设置点击事件，也可传值，在这里只是为了更加清晰演示）
Markup
<button @click="keyBtn()">按钮</button>
在JS中，我们给data中定义一个keys为传的参数，在点击事件 keyBtn()中，给keys赋值
JavaScript
export default {
name: 'app',
data () {
return {
keys: '默认值'
}
},
components:{
childer: childer
},
methods: {
keyBtn(){
this.keys = '我是父级给子级传的内容'
}
}
}
接着在父级的子组件标签上写上如下，KeyChilder自行命名
Markup
<childer :KeyChilder='keys'></childer>
【PS】如果父组件未点击，那么默认的keys的值为“默认值”。
最后，我们在子组件中使用props进行接收，例如
JavaScript
export default {
name: 'childer',
data () {
return {
}
},
props:["KeyChilder"]
}
KeyChilder即为我们接收的值，随便写个标签显示到页面中即可
Markup
<p>{{KeyChilder}}</p>
