父组件向子组件下发数据

定义应用 Vue.js最核心的功能是组件，整个框架设计最精彩的地方也是组件。使用组件化的过程中，会用到父组件和子组件，所以，父子组件之间通信就显得十分重要啦。

定义

在vue中，父组件和子组件通信可以使用props。

props：prop 是父组件用来传递数据的一个自定义属性，父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”。

props的用法一共有以下三种：

第一种：

transMsg: ['myMessage']

第二种：

props: { transMsg: Array //指定传入的类型，如果类型不对，会警告 }

第三种：

props: { transMsg: { type: Array, default: [1,2,3] //指定默认的值 } }

刚好最近实现了以组件化的形式引入Echarts，所以就把绘制柱状图封装成了一个子组件，需要展示柱状图的时候直接在父组件中引入子组件即可，所以，用到了props来实现父子组件之间的通信：

应用

父组件在标签中写入需要传入子组件的数据：

<div class="bar_container"> <barchart id="histogram_graph" :xArr="a" :apple="yapple" :banana="ybanana" :pear="ypear"></barchart> </div> components: { barchart, }, data(){ return{ a: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"], yapple: [24,96,129,238,160,180,241], ybanana: [25.69,59,156,11,23,202], ypear: [24,16,10,20,100,170,201] } }

子组件：

接收数据：

props: { id: { type: String, default: 'chart' }, xArr: Array, apple: Array, banana: Array, pear: Array }, data(){ return { msg: '柱状图', chart: null, } },

X轴数据填充：

xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, data: this.xArr } ],

Y轴数据填充：

series: [ { name:'苹果', type:'bar', data: this.apple }, { name:'香蕉', type:'bar', yAxisIndex: 1, data: this.banana }, { name:'梨', type:'line', yAxisIndex: 2, data: this.pear } ]

页面效果如下： 这样，就将绘制柱状图封装成了一个公共的组件，使用时，直接传值引用即可，是不是很方便丫。

参考链接： https://www.cnblogs.com/ccyinghua/p/7874651.html https://www.cnblogs.com/lhb25/p/10-way-of-vue-data-interact.html