組件化是vue的核心思想,它能提升開發效率,方便重複使用,簡化調試步驟,提高整個項目的可維護 性,便於多人協同開發
+1)屬性propsvue
// child props: { msg: String } // parent <HelloWorld msg="Welcome to Your Vue.js App"/>
+2) 特性$attrsnode
// child:並未在props中聲明foo <p>{{$attrs.foo}}</p> // parent <HelloWorld foo="foo"/>
+3)引用refsvuex
// parent <HelloWorld ref="hw"/> mounted() { this.$refs.hw.xx = 'xxx' }
+4)子元素$children(子元素不保證順序)vue-cli
// parent this.$children[0].xx = 'xxx'
// child this.$emit('add', good) // parent <Cart @add="cartAdd($event)"></Cart>
經過共同的祖輩組件搭橋,$parent或$root。ide
// brother1 this.$parent.$on('foo', handle) // brother2 this.$parent.$emit('foo')
因爲嵌套層數過多,傳遞props不切實際,vue提供了 provide/inject API完成該任務
1.provide/inject:可以實現祖先給後代傳值組件化
// ancestor provide() { return {foo: 'foo'} } // descendant inject: ['foo']
+.事件總線:建立一個Bus類負責事件派發、監聽和回調管理this
// Bus:事件派發、監聽和回調管理 class Bus{ constructor(){ this.callbacks = {} } $on(name, fn){ this.callbacks[name] = this.callbacks[name] || []
實踐中能夠用Vue代替Bus,由於它已經實現了相應功能 vuex:建立惟一的全局數據管理者store,經過它管理數據並通知組件狀態變動prototype
範例:組件通訊 組件通訊範例代碼請參考components/communicate 插槽 插槽語法是Vue 實現的內容分發 API,用於複合組件開發。該技術在通用組件庫開發中有大量應用。 匿名插槽 具名插槽 將內容分發到子組件指定位置 // comp1 <div> <slot></slot> </div> // parent <comp>hello</comp> this.callbacks[name].push(fn) } $emit(name, args){ if(this.callbacks[name]){ this.callbacks[name].forEach(cb => cb(args)) } } } // main.js Vue.prototype.$bus = new Bus() // child1 this.$bus.$on('foo', handle) // child2 this.$bus.$emit('foo')
+.實踐中能夠用Vue代替Bus,由於它已經實現了相應功能
+.vuex:建立惟一的全局數據管理者store,經過它管理數據並通知組件狀態變動調試
組件通訊範例代碼請參考components/communicatecode
插槽語法是Vue 實現的內容分發 API,用於複合組件開發。該技術在通用組件庫開發中有大量應用。
1.匿名插槽
// comp1 <div> <slot></slot> </div> // parent <comp>hello</comp>
2.具名插槽
將內容分發到子組件指定位置 // comp2 <div> <slot></slot> <slot name="content"></slot> </div> // parent <Comp2> <!-- 默認插槽用default作參數 --> <template v-slot:default>具名插槽</template> <!-- 具名插槽用插槽名作參數 --> <template v-slot:content>內容...</template> </Comp2>
3.做用域插槽
分發內容要用到子組件中的數據 // comp3 <div> <slot :foo="foo"></slot> </div> // parent <Comp3> <!-- 把v-slot的值指定爲做用域上下文對象 --> <template v-slot:default="slotProps"> 來自子組件數據:{{slotProps.foo}} </template> </Comp3>
4.範例插槽相關範例請參考components/slots中代碼