vue/mpvue父子组件传值示例（超详细）

情景描述：父组件shopCart   子组件 footerBox

步骤一：父组件引入子组件
<templete>
    <div>
        <footerbox staticNum="3"  :dynamicNum="num"></footerbox>
    </div>
</templete>

<script>
export default{
    import footerBox from './footerBox.vue'
    data(){
        return{
            num:0   //初始化为0
        }
    },
    componemnts:{
       "footerBox":footerBox
    }
}
</script>

步骤二：子组件接收
<templete>
    <div>
        <p>{{staticNum}} </p>  //静态值，3
        <p>{{dynamicNum}}</p>  //动态值，随父组件传值改变
    </div>
</templete>
<script>
export default {
    props:{
        staticNum:{
            type:Number //这样写更规范，也可以直接staticNum
        }
        dynamicNum:{
            type:Number
        }
    }
}
</script>