vue 父组件和子组件

Question

有这种情况
1.父组件中 引入子组件，然后往子组件传值(数组)， 在子组件中处理数据返回结果，比如 arrList数组

2.父组件设置一个按钮，当我点击父组件这个按钮，需要把子组件的数据(arrList数组)发送到父组件,或者说父组件要获取子组件的这个数据

更新：按钮不能放在子组件，因为父组件中引入子组件，遍历赋值数据的
如代码：（Bar子组件）

  <Bar :id="'chart'+index" :chartType="item.content" :chartData="item.resultCount" :chartColor="disableCategoryRatoColor" :chartTitle="item.typeName"></Bar>

Answer 1

父组件点击事件中使用refs调用子组件事件，在子组件事件里使用$emit向父组件传数据。

PS：我觉得你这个按钮放在子组件里会省事很多。

更新：举个栗子。

<component @listenChange='listenChange' ref='component' />
<button @click='getChildData'>Click</button>

// 父
getChildData () {
    this.$refs.component.transmitData()
}
listenChange (data) {
    console.log(data)
}

// 子
transmitData () {
    this.$emit('listenChange', {data: this.data})
}