以下两种子组件给父组件传数据的方式共同点是,都必须配置回调函数
1.通过父组件给子组件传递函数类型的props实现子给父传递数据
在主组件app.vue中
<template>
<div>
<p>这是父组件</p>
<!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据 -->
<!-- 将getname给my,my.vue中用props声明接收 -->
<my :getname="getname"></my>
</div>
</template>
<script>
import my from "./components/my.vue"
export default {
name: 'App',
components:{
my
},
methods:{
// 定义getname函数,需要接受数据,有入参
getname(name){
console.log('App收到了子组件传过来的数据',name)
}
}
}
</script>
<style>
p{
background-color: #FFA500;
}
</style>
子组件my.vue的代码:
<template>
<div>
<p>
{{msg}}
</p>
<!-- 给一个按钮触发传数据给父组件 -->
<button @click="sendname">点击把子组件数据传给父组件</button>
</div>
</template>
<script>
export default{
name:'my',
data(){
return{
msg:"这是子组件"
}
},
props:['getname'],
methods:{
sendname(){
this.getname(this.msg)
}
}
}
</script>
<style scoped>
div,p{
background-color: blue;
}
</style>
运行后点击按钮后控制台可输出:
2.通过父组件给子组件绑定自定义事件实现子给父传递数据
在主组件app.vue中:
<template>
<div>
<p>这是父组件</p>
<!-- v-on在my组件标签上,给my的实例组件上绑定了getname事件 -->
<my v-on:getname="getmsgname">
</div>
</template>
<script>
import my from "./components/my.vue"
export default {
name: 'App',
components:{
my
},
methods:{
getmsgname(name){
console.log('App收到了子组件传过来的msg',name)
}
}
}
</script>
<style>
p{
background-color: #FFA500;
}
</style>
在子组件my.vue中:
<template>
<div>
<p>
{{msg}}
</p>
<!-- 给一个按钮触发传数据给父组件 -->
<button @click="sendname">点击把子组件数据传给父组件</button>
</div>
</template>
<script>
export default{
name:'my',
data(){
return{
msg:"这是子组件"
}
},
props:['getname'],
methods:{
sendname(){
// 通过组件上的$emit触发my组件实例上的getname事件
this.$emit('getname',this.msg)
}
}
}
</script>
<style scoped>
div,p{
background-color: blue;
}
</style>
运行点击按钮后可查看到控制台: