首页> 基础笔记 >Vue学习笔记 >组件 组件
vue组件属性props--逆向传递数据
作者：小萝卜 2024-03-13 【 Vue 】 浏览 84
简介通过props实现子组件向父级组件传递数据
需求：通过props实现子组件向父级组件传递数据
原理：父级组件传递一个函数给子组件，子组件接收函数并给函数传递数据。父组件可以接收这个数据
实例：
父级组件：
<template>
<h3>父级组件</h3>
<p>子组件传过来的数据：{{msg}}</p>
<ComponentE :title="title" :setMsg="dataMsg"/>
</template>
<script>
import ComponentE from './componentE.vue'
export default{
data(){
return{
title:'标题',
msg:''
}
},
methods:{
dataMsg(data){
//这里的data就是子组件传过来的数据
this.msg = data;
}
},
components:{
ComponentE
}
}
</script>
子组件：
<template>
<h3>子组件</h3>
<p>{{title}}</p>
<p>{{setMsg('将数据传给父级')}}</p>
</template>
<script>
export default{
props:{
title:{
type:String
},
setMsg:{
type:Function
}
}
}
</script>
很赞哦！ (0)
