vue 父子组件通信——父组件向子组件下发数据

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