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

Posted 2020-11-09 江山一族

父页面：

<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>