最近用vue练习项目，想在子组件中使用props中的值，但是在mounted中没有办法拿，最后终于搞明白了
这里我简单说一下父组件给子组件传值的两种情况(静态跟动态的数据)。
父组件中：
<template> <div class="order"> <!-- 子组件 父组件通过属性传值 属性用-链接，值用驼峰命名--> <order-header :order-data="orderData" :order-data1="orderData1"></order-header> </div> </template> <script> export default{ data(){ return { orderData:[], //这里的数据是动态的， (可以是从后端获取的数据) orderData1:[1,2,3] //这里为静态值直接传给子组件，并且不发生变化 } }, mounted(){ this.getOrder(); }, methods:{ //获取数据 getOrder(){ axios.post(api,{ }).then((res)=>{ console.log(res); //将请求的数据放在orderData中 //这里的res.data.pageData是数组 this.orderData = res.data.pageData }).catch((err)=>{ console.log(err); }) } } } </script>
分析
父组件传递给子组件传递两个值，orderData1传递静态不变的值，orderData传递动态的值
子组件：
export default{ props:['orderData','orderData1'] }
分析
子组件中接收用props，在template中可以直接使用{{orderData}}
子组件的methods中想要取到props中的值，
直接使用this.orderData1，但这种情况只能获取静态的值，所以只能获取orderData1，而orderData的值是动态的，如果用this.**获取到的是空或者是默认值
解决方法使用watch 重点
// 这里单独解释orderData(动态) props:['orderData'], data(){ return { newOrderData:[] } }, methods:{ order(){ console.log(this.newOrderData) } }, watch:{ orderData:function(newData,oldData){ console.log(newData) //newData就是orderData this.newOrderData = newData; // methods的函数在这里调用可以获取到newOrderData的值 this.order(); } }
注：监听的值，如果有空转变时就触发，拿到值之后的处理方法也要在watch中运行
结论
props接收静态数据用this.**
动态数据用watch
如有不足之处，还望不吝赐教
喜欢的话可以体验我的小程序
微信小程序搜：红旗头像制作
