父頁面：
<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>