>[success] # $attrs 包括 class & style ~~~ 1.于2.x 不同3.x現在 $attrs 包含傳遞給組件的所有 attribute，包括 class 和 style。 ~~~ >[danger] ##### 在看這個之前 [在看這個之前你需要看這篇文章關于2.x inheritAttrs介紹](http://www.hmoore.net/cyyspring/vuejs/988817) * 子組件 ~~~html <template> <label> <input type="text" v-bind="$attrs" /> </label> </template> <script> export default { inheritAttrs: false } </script> ~~~ * 父組件 ~~~html <my-component id="my-id" class="my-class"></my-component> ~~~ >[info] ## 2.x 使用 ~~~ 1.當將'inheritAttrs' 為false 時候（默認是true），它只識別在子組件prop綁定的值通過父組件傳遞， 除了style 和 class 他們無論true 或者flase 只要沒有具體定義 他們將都會和子組件最外層的dom的 class 和style 合并 2.如果是默認true，class 和style依舊是之前規則 沒有在子組件定義的prop但在父組件使用的屬性將替換掉子 組件最外層dom相同屬性 3.包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。當一個組件沒有聲明 任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內 部組件，簡單理解這句話'我沒在子組件定義prop 但是又想讓一些屬性想prop 一樣作用在指定位置我可以使用$attrs' 4.默認true的情況下沒有定義的將作用在最外層dom，class和style 是合并，但是現在問題就是我設置了'inheritAttrs' 為false ，那么沒定義的一些屬性（class 和style除外他們依舊將和最外層dom 一起合并），但是如果這個時候使用 '$attrs' 這些沒有被定義的元素在父組件使用時候默認在子組件定義了，那么這些元素可以在我們聲明地方使用， class 和style 卻被刨除在外 ~~~ >[danger] ##### 舉個例子 ~~~ 1.inheritAttrs: false 時候原本向下面案例'id="my-id"' 將不會對最后生成效果有任何體現因為他沒有再prop定義 不會增加該熟悉，并且他有不是true 會在自組建最外層dom替換，現在使用了'$attrs' 將id 變成了一個子組件的 一個 prop此時就變成下面效果作用在定義的位置 而不是像true作用在最外層像flase沒定義無任何效果 2.但是class 卻沒有想我們預期一樣因為$attrs 不能將class 和style 抽象理解成轉換成prop 依舊作用在最外層 dom節點上 ~~~ * 上面例子效果 ~~~html <label class="my-class"> <input type="text" id="my-id" /> </label> ~~~ >[info] ## 3.x ~~~ 1.3.x $attrs 包含所有的 attribute class 和style 不在是自己的一套規則 ~~~ * 上例子在3.x渲染效果 ~~~html <label> <input type="text" id="my-id" class="my-class" /> </label> ~~~