父组件向子组件传值
儿子页面定义个props,然后传值,老子页面通过自定义标签的属性绑定获取值 :fatherData='fatherData'
props属性值类型
字符串string
数值Number
布尔值Boolean
数组Array
对象Object
儿子页面:
<template>
<div class="my-child">
<h3>我是子组件</h3>
<p>儿子的数据:都是玩具</p>
<ul>
<li>{{childData.joy}}</li>
<li>{{childData.fly}}</li>
</ul>
儿子继承爸爸的钱财
<p>{{fatherData.money}}</p>
</div>
</template>
<script>
export default {
data() {
return{
childData:{
joy:'变形金刚',
fly:'直升机'
}
}
},
props:{
fatherData:Object
},
methods:{
}
};
</script>
爸爸页面:
<template>
<div class="my-parent" style="background:#fff">
<h3>我是父组件</h3>
<p>爸爸的数据</p>
<ul>
<li>钱财:{{fatherData.money}}</li>
<li>工作:{{fatherData.job}}</li>
</ul>
<child-my :fatherData='fatherData'></child-my>
</div>
</template>
<script>
import childMy from "../../../../common/child-my.vue";
export default {
components:{childMy},
data(){
return{
fatherData:{
money:100000000,
job:'程序员'
}
}
},
methods:{
}
};
</script>
总结:爸爸页面关键代码:
儿子页面关键代码: