vue的props和$attrs

過去我們在vue的父子組件傳值的時候，我們先需要的子組件上用props注冊一些屬性：

<template>
    <div>
        props:{{name}},{{age}} 或者 {{$props['name']}},{{$props['age']}}
    </div>
</template>

export default{
    props: ['name','age']
}

然后父組件調用的時候當屬性來傳值

<child name="rick" :age="18"></child>

---

如果我們給child傳props沒有注冊的屬性，我們就要用$attrs來取了

<child name="rick" :age="18" gender="male"></child>

child:

<template>
    <div>
        props:{{name}},{{age}} 或者 {{$props['name']}},{{$props['age']}} 
        <br>
        attrs: {{$attrs['gender']}}  在$attrs里面只會有props沒有注冊的屬性
    </div>
</template>

export default{
    props: ['name','age']
}

---

當然這個$attrs是vue2.4才推出的，為了簡化父組件和孫組件的傳值：

父組件 template（假設gender屬性沒有被props注冊）:

<child1 gender="male"></child1>

child1 template(v-bind=”$attrs”，這是v-bind唯一可以直接跟等號的特殊寫法):

<child2 v-bind=”$attrs”></child2>

在child2里面，就可以直接用props注冊gender,來直接獲取來自“祖父組件”的gender值了（當然，不注冊也是可以用$attrs來取值的）