>[success] # 組件 ~~~ ~~~ >[info] ## 全局和局部組件 ~~~ 1.組件的注冊方式有兩種一種是全局組價，一種是局部組件 1.1.全局組件'vue3.x' 中注冊方法是'app.component',這種形式的 '弊端':是使用打包工具例如'webpack',將會將所有的全局組件都構建在一起，即使你不使用這個組件他也 將會構建在結果中。 '好處'：拋開你渲染的dom來說不限制使用的位置 1.2.局部組件是有'components' 注冊方法在組件的'components' 字段添加注冊組件，它的優缺點和全局組件 正好相反 ~~~ >[info] ## Prop ~~~ 1.關于prop 依舊和之前一樣是一個父傳子的過程 ~~~ >[danger] ##### 記錄一下小的概念 ~~~ 1.prop 傳入一個靜態的值: <blog-post title="My journey with Vue"></blog-post> 2.傳入動態值配合v-bind <blog-post :title="post.title"></blog-post> 3.沒有傳值默認為true <blog-post is-published></blog-post> 4.傳入一組值 post: { id: 1, title: 'My Journey with Vue' } <blog-post v-bind="post"></blog-post> 等價于： <blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post> ~~~ >[info] ## 關于非 Prop 的 Attribute ~~~ 1.一個非 prop 的 attribute 是指傳向一個組件，但是該組件并沒有相應 props 或 emits 定義的 attribute。 常見的示例包括 class、style 和 id 屬性。 ~~~ >[danger] ##### 沒有定義的屬性作用的位置 ~~~ 1.這些沒有定義的屬性都將作用在根節點上，下面案例中子組件并沒有在props屬性定義' data-status'，因此 最后渲染時候在根節點上 ~~~ * 子組件定義 ~~~ app.component('date-picker', { template: ` <div class="date-picker"> <input type="datetime" /> </div> ` }) ~~~ * 使用 ~~~ <date-picker data-status="activated"></date-picker> ~~~ * 渲染效果 ~~~ <!-- 渲染 date-picker 組件 --> <div class="date-picker" data-status="activated"> <input type="datetime" /> </div> ~~~ >[danger] ##### 當然如果想只使用定義的屬性 ~~~ 1.想讓沒有定義的屬性不渲染在根節點需要配置'inheritAttrs: false',默認該配置為'true' 因此會出現沒有定義 作用在根節點上 ~~~ >[danger] ##### 沒有定義的事件 ~~~ 1.同樣在子組件沒用定義$emits 中的事件將作用在根節點上 ~~~ >[danger] ##### 這個系列的改動 [鏈接](http://www.hmoore.net/cyyspring/vuejs/2165362) [$attrs 包括 class & style ](http://www.hmoore.net/cyyspring/vuejs/2165526) >[info] ## $emits 改動 [看這里](http://www.hmoore.net/cyyspring/vuejs/2166242) >[info] ## v-model 改動 [看這里](http://www.hmoore.net/cyyspring/vuejs/2169775) >[info] ## 動態組件is 用法改動 [看這里](http://www.hmoore.net/cyyspring/vuejs/2166031) >[info] ## 插槽 [插槽需要經常復習](https://v3.cn.vuejs.org/guide/component-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%E5%AE%B9)