組件的使用 · 前端工程化指南

## 前言本篇主要介紹組件的使用以及父子組件的傳值和事件互相調用。 ## 定義組件無論那種組件，需要注意的是組件內的data必須為函數，通過函數內return data來實現數據使用；組件的el也必須使用函數 ### 組件命名規范 * [參考官網文檔](https://pablohpsilva.github.io/vuejs-component-style-guide/?from=singlemessage&isappinstalled=1#/chinese) * 項目實踐描述 1.有意義的，如果是業務組件要用業務的名稱；如果是ui組件要用ui的名稱 2.名稱簡短 3.具有可讀性，便于溝通 4.符合自定義元素規范，避免使用保留字，使用統一的連接符中劃線 5.app-作為統一的命名空間，想到其他項目可以共用 ### 頁面內定義的組件 * 頁面內可以定義全局或者頁面組件 ~~~ // 注冊全局組件 Vue.component('my-component', { template: '<div>A custom component!</div>'， props:[] }) //局部組件 var app=new Vue({ el:"#app", components:{ [ 'my-component': { template: '#myComponent', data: function() { return { msg: 'This is a Component!' //Vue中component的data必須通過function() return } }, methods: { showMsg: function() { alert(this.msg); } } ] }) //使用template標簽實現組件 <template id="myComponent"> <div>This is a component!</div> </template> Vue.component('my-component', { template: '#myComponent'， props:[] }) ~~~ ### 單文件組件 * 單獨的一個組件作為一個文件，包括該組件需要的樣式以及腳本數據等，如果你想組件也使用共用資源或者同類資源管理的方式也是可以的。其他：[參考官網介紹](https://cn.vuejs.org/v2/guide/single-file-components.html) ~~~  <template> <div > <h2>comp的組件</h2> data </ul> </div> </template> <script> export default { name: 'comp', data () { return { data:'data' } } } </script>  <style scoped less> </style> ~~~ ## 引入組件 * 引入文件組件，然后在使用的組件內注冊該組件即可 ~~~  <comp></comp> <script> import comp from './comp' export default { name: 'app', components:{comp}, data () { return { } }} </script> ~~~ * 在全局中注冊文件組件，就可以直接使用，在components中將所有組件注冊一遍，頁面中可以直接使用 ~~~ import Vue from 'vue' import booklist from './booklist' import comp from './comp' const components = [booklist, comp ] components.map(component => { Vue.component(component.name, component) }) export default { booklist, comp } ~~~ * 組件傳值以及綁定方法組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內直接引用父組件的數據。父組件可以使用 props 把數據傳給子組件。注意：在子組件中定義prop時，使用了camelCase命名法。由于HTML特性不區分大小寫，camelCase的prop用于特性時，需要轉為 kebab-case（短橫線隔開）。例如，在prop中定義的myName，在用作特性時需要轉換為my-name。 ~~~ //組件中聲明可以直接使用，組件中直接使用屬性名稱即可，與data中定義的具有相同的效果，可以直接使用，但不是同一個數據 props:['attr'] props:['mySize'] //使用的時候屬性顯性聲明注入，直接冒號綁定數據就可以，如果你不是動態數據的內容，那么去掉冒號即可(另外需要注意的是如果加了冒號，引號內支持的是js表達式，否則只是字符串) <comp :message="msg" :my-size='size'></comp> data () { return { msg:'示例的子組件' } } ~~~ ~~~ //父組件 <father> <child :love="msg"></child> </father> //子組件 export default { ... props: ['love'] } ~~~ * 子組件向父組件傳遞數值，通過event傳遞如在par中使用子組件sub,可以使用自定義事件(myClick)來完成:如果你傳遞的是多個值，封裝到一個對象中。 `<sub @myClick="handlerClick" />` 在sub中使用`this.$emit('myClick')`去觸發。 par中寫好handlerClick(常規的method方法)對應去處理即可。 * 同級組件(非父子組件)數據傳遞兄弟組件或者完全不相關的組件通信就需要使用一個你說的中央事件總線去處理，這個new Vue()寫在一個單獨的文件中作為公用的util方法如 a,b通信, 在a組件的生命周期函數里面去寫對應的監聽事件如在mounted處理: ~~~javascript //一般定義在公共的腳本中，如果你是spa項目的話，寫在main.js文件中 window.eventBus = new Vue(); //a組件, 監聽my-event事件，進行對應的處理,組件創建前添加鉤子函數 mounted(){ eventBus.$on('my-event', (data) => { //do something... }) } //b組件比如在某個元素點擊后觸發 my-event methods: { click: function(){ eventBus.$emit('my-event', data); // data是要傳遞的數據 } } ~~~ * 注意事項組件中傳入的值如果后續發生改變，那么原始注入的值就會發生改變，建議將值使用賦值到另一個變量，不要直接改變注入屬性的值。雖然這不會影響原來的。如果使用了v-model的模型，會實時改變到使用這個值的組件。 ## 組件事件觸發 ## 單向數據流在vue2.x之后，組件中是只建議使用單向數據流，也就是props可以父組件向子組件傳值之后，通過data的數據項來讀取，不建議直接使用prop的值， - 如果你傳值是簡單數據類型，那么可以在子組件的data屬性中，將data值賦值為傳遞的屬性值。(否則會報錯) ~~~ <child :status='status'></child> Vue.component("child",{ template:"<span>{{value}}</span>", props:{ status }, data(){ return { value:this.status } } }) ~~~ - 如果傳值是引用數據類型，那么需要子組件 props:{["initCount"} 由于js中對象以及數組是引用類型，所以當prop為對象或者數組時，會有雙向綁定的效果，這點有利有弊 ## 數據驗證 - 屬性傳入支持常規的數據格式驗證，也支持自定義驗證。常規的類型有String,Number,Boolean,Object,Array,Function ，可以設置多個類型，用數組實現.在其內部是通過insanceof來實現數據類型的判斷。 ~~~ props:{ len :{ type:[String,Number] } } ~~~ - 支持required是否必須字段，支持default設置默認值，dafault為一個值或者返回默認值的方法。 - 支持validator ,對數據的內容進行嚴格的校驗，可能是長度，格式，具體內容等，返回是否符合結果的布爾型結果即可。 ## 動態組件有的時候，在不同組件之間進行動態切換是非常有用的，比如在一個多標簽的界面里：上述內容可以通過 Vue 的 <component> 元素加一個特殊的 is 特性來實現：如果你希望組件不會每次都渲染、銷毀，那么你可以設置v-once .其中兩個組件的屬性注入都可以寫入。 ~~~  <component v-bind:is="currentTabComponent"></component> ~~~ 在上述示例中，currentTabComponent 可以包括已注冊組件的名字，或一個組件的選項對象。 ## 插槽分析內容 - [插槽分發內容](https://cn.vuejs.org/v2/guide/components.html#%E9%80%9A%E8%BF%87%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9) - [插槽詳解](https://cn.vuejs.org/v2/guide/components-slots.html) 和 HTML 元素一樣，我們經常需要向一個組件傳遞內容，像這樣：它可以是內容也可以是html代碼。 ~~~ <alert-box> Something bad happened. </alert-box> ~~~ ### 基本使用首先需要在組件定義的時候，定義好插槽的位置。那么引用時 ~~~ Vue.component("link",{ template："<a v-bind:href="url" class="nav-link"> <slot></slot></a>" }) ~~~ ### 具名插槽，允許你將多個插槽通過name區分 ~~~ //模板 <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> //使用時 <base-layout> <template slot="header"> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template slot="footer"> <p>Here's some contact info</p> </template> </base-layout> ~~~ ### 默認內容可以在插槽內寫好內置內容，支持傳入新內容時覆蓋。 ~~~ <button type="submit"> <slot>Submit</slot> </button> ~~~ ### 編譯作用域該插槽可以訪問跟這個模板的其它地方相同的實例屬性 (也就是說“作用域”是相同的)。但這個插槽不能訪問 <navigation-link> 的作用域。例如嘗試訪問 url 是不會工作的。牢記一條準則： **父組件模板的所有東西都會在父級作用域內編譯；子組件模板的所有東西都會在子級作用域內編譯** ~~~ <navigation-link url="/profile"> Logged in as {{ user.name }} </navigation-link> ~~~ 想我插槽內容提供數據的時候，可以通過常規的屬性綁定實現： ~~~ <ul> <li v-for="todo in todos" v-bind:key="todo.id" >   <slot v-bind:todo="todo">  {{ todo.text }} </slot> </li> </ul> ~~~ 那么進一步，如果我們想實現自定義的模板字符串，可以通過template，以及slot-scope實現插槽內容。（在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽內的任何元素或組件上） ~~~ <todo-list v-bind:todos="todos">  <template slot-scope="slotProps">   <span v-if="slotProps.todo.isComplete">?</span> {{ slotProps.todo.text }} </template> </todo-list> ~~~ 更進一步，在支持es2015的瀏覽器可以用結構拿到某些對應的參數。這樣可以使得插槽內容更純粹，只保留有用的數據。 ~~~ <todo-list v-bind:todos="todos"> <template slot-scope="{ todo }"> <span v-if="todo.isComplete">?</span> {{ todo.text }} </template> </todo-list> ~~~ ## 相關文檔 - [組件規范文檔](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md)