Vue組件化實戰(筆記)

運行環境

  1. node 10.x
  2. vue.js 2.6.x
  3. vue-cli 3.x

組件化

組件化是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']

任意兩個組件之間:事件總線 或 vuex

+.事件總線:建立一個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中代碼

相關文章
相關標籤/搜索