parent.vue

<template>
  <div>
    <roles :roleData="item" v-for="item of roleData"></roles>
  </div>
</template>

<script>
import Roles from '_c/roles/roles'
import { getRoleInfo } from '@/api/role'
export default {
  name: 'rolelist',
  components: {
    Roles
  },
  data () {
    return {
      roleData: []
    }
  },
  mounted () {
    getRoleInfo().then(res => {
      res = res.data
      if(res.ret && res.data) {
        this.roleData = res.data
      }
    })
  }
}
</script>

child.vue

<template>
  <Card class="card">
     <p slot="title">
        <Icon type="md-settings"></Icon>
        {{roleData.roleName}}
    </p>
    <Form :model="form" :label-width="80">
      <FormItem>
        <CheckboxGroup v-model="form.role" class="checkbox-group" :size="size">
          <Checkbox :label="item" class="checkbox" v-for="item of data" :key="item">
              <span>{{item}}</span>
          </Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('form')" class="btn">提交</Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
import { postRoleInfo } from '@/api/role'
export default {
  name: 'rolelist',
  data () {
    return {
      icon: 'ios-key',
      size: 'large',
      data: [],
      form: {
        role: []
      }
    }
  },
  props: {
    roleData: {
      type: Object,
      default () {
        return {
          roleName: '',
          function: []
        }
      }
    }
  },
  methods: {
    handleManage (data) {
      data.forEach((item) => {
        if(item.isHave) {
          this.form.role.push(item.functionName)
        }
        this.data.push(item.functionName)
      })
    },
    handleSubmit (name) {
      this.$Message.success('Success!');
      postRoleInfo(this.form)
    }
  },
  mounted () {
    this.handleManage(this.roleData.function)
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 20px;
  }
  .checkbox-group{
    font-size: 16px;
  }
  .checkbox{
    margin: 30px;
  }
  .btn{
    float: right;
    margin-right: 165px;
  }
</style>

上面这种写法是可以正常获取到值的 

但是如果我改成下面这种

parent.vue

虽然 {{roleData.roleName}}值是能够传过去的，但是内容就空了

只能通过监听child.vue组件中的props接收的roleData数据才能够显示

具体原因还不知道，如果有人知道，希望能在下面提一下T.T

原因好像是Vue不会监听数值下标赋值，只能通过数组的变异方法来同步视图