vue父页面给子页面传递数据

父页面:

<template>
<div>{{msg}}
<Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' :num='num'/>
<button @click="chageMsg">修改数据</button>
<input type="text" v-model="lifemsg" />
</div>

</template>

<script>
import Son from './son'
export default {
name: 'mc',
data() {
return {
msg: '自定义',
data:'我是父数据',
lifemsg:'',
num:10

}
},
components:{
Son
},
methods:{
chageMsg(event){
this.data = '修改后的自定义'
}
}
}
</script>
<!--scoped样式只在当前组件生效-->
<style scoped>

</style>

 

子页面:

<template>
<div><p>son {{title}},{{data}} </p>
<p>父页面传过来的:{{lifemsg}}</p>
<p>{{num}}</p>
</div>

</template>

<script>
export default {
name: 'son',
data() {
return {
msg: '自定义'

}
},
props:['title','data','lifemsg','num']
// props:{ //对父类的数据类型进行验证
// title:[String,Number]
// lifemsg:String,
// num:Number,
// data:{
// type:String,
// required:true
// }
// }
}
</script>

<style>

</style>

posted @   江山一族  阅读(12076)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示