vue父组件向子组件传值怎么拆解成单个变量？

Question

父组件传一个对象，有很多属性，子组件接收时怎么把每个属性单独赋值给定义的data值？
比如传递的参数：

prop={
    a:11,
    b:22,
    c:33
    ...
}

子组件接收时怎么让data里定义的a,b,c分别等于11,22,33？
只能this.a=prop.a?...
我知道data里可以不定义，但dom里绑定时每个都需要加prop.，感觉也很繁琐

Answer 1

props: {
  a: {
    type: Number,
    default: 11
  },
  b: {
    type: Number,
    default: 22
  }
}

Answer 2

v-bind

Answer 3

文档多看看有好处

Answer 4

哦哦哦！
你通过 props 传递的是对象，
然后期望 赋值给 data ？
那么为什么不试试这样呢？

data(){
    return {
        ...this.PropsData
    }
}

对你没看错，这样是可以的

Answer 5

prop = { a: x, b: x }
<child v-bind="prop"> </child>

Answer 6

props:[a,b,c]

Answer 7

父组件

<template>
<div>
    <a-child :query="query"></a-child>
</div>
</template>
<script>
export default {
    data () {
        return {
            query: {
                a: 1,
                b: 2,
                c: 3
            }
        }
    }
}
</script>

子组件

<template>
    <div>
        <p>{{a}}</p>
        <p>{{b}}</p>
        <p>{{c}}</p>
    </div>
</template>
<script>
export default {
    data () {
        return {
            a: '',
            b: '',
            c: ''
        }
    },
    props: {
        query: {
            default () {
                return {}
            }
        }
    },
    watch: {
        query (val) {
            this.setQuery();
        }
    },
    created () {
        this.setQuery();
    },
    methods: {
        setQuery () {
            this.a = this.query.a || '';
            this.b = this.query.b || '';
            this.c = this.query.c || '';
        }
    }
}
</script>