今天小编就为大家分享一篇vue中子组件的methods中获取到props中的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
父子组件通信
这个官网很清楚，也很简单，父组件中使用v-bind绑定传送，子组件使用props接收即可
例如：
父组件中
<div> <section class="data_section"> <header class="chart-title">数据统计</header> <div class="grid-content data-head blue-head">统计：</div><div class="grid-content data-head">销售数量 <span>{{number}}</span></div><div class="grid-content data-head">销售金额 <span>{{amount}}</span></div><div class="grid-content data-head">利润统计 <span>{{profits}}</span></div></section></div>
子组件中
export default { props: ['chartData'] }
这种情况下，子组件的methods中想要取到props中的值，直接使用this.chartData即可
但是有写情况下，你的chartData里面的值并不是固定的，而是动态获取的，这种情况下，你会发现methods中是取不到你的chartData的，或者取到的一直是默认值
比如下面这个情况
父组件中
此时子组件的methods中使用this.chartData会发现是不存在的(因为为空了)
这情况我是使用watch处理本文来源gao($daima.com搞@代@#码(网
解决方法如下：
使用watch
props: ['chartData'], data(){ return { cData: [] } }, watch: { chartData: function(newVal,oldVal){ this.cData = newVal; //newVal即是chartData this.drawChart(); } },
监听chartData的值，当它由空转变时就会触发，这时候就能取到了，拿到值后要做的处理方法也需要在watch里面执行
以上就是vue中子组件的methods中获取到props中的值方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue中子组件的methods中获取到props中的值方法
转载请注明原文链接：vue中子组件的methods中获取到props中的值方法
