一个VUE组件复用，通过父子间传值修改内容，以及修改背景色

一个组件在多个地方复用（自定义组件），通过父子间传值，修改背景颜色。
父元素

<template>
  <div class="home">
    <div ><HelloWorld :arr="arr" bgccolor="green"/></div>  //添加组件，arr是数组内容
    <div ><HelloWorld :arr="arr" bgccolor="red"/></div>   //添加组件，bgccolor是背景颜色
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  data(){
    return{
      num:1,
      arr: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }]
    }
  },
  components: {
    HelloWorld
  }
}
</script>

子组件

<template>
  <div class="hello">
    <ul :style="get